2015-05-06 64 views
1

任何人都请帮助实现获取位置名称,同时点击谷歌地图。如何让onclick获取地图名称?

例如: 如果我要点击美国各州的“德克萨斯州或阿拉巴马州”位置标记,则需要在点击时获取确切的值。

如果有任何其他方式获取位置名称。如果它是possbile,那么请分享你的经验。等待您的重播。

下面是我的代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport"></meta> 
<title>Copy of USA Nevada state - City Level data - Google Fusion Tables</title> 
<style type="text/css"> 
html, body, #googft-mapCanvas { 
    height: 300px; 
    margin: 0; 
    padding: 0; 
    width: 500px; 
} 
</style> 

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&amp;v=3"></script> 

<script type="text/javascript"> 
    //Fusion Table URL : https://www.google.com/fusiontables/data?docid=1vKMjmiVb3eHCEnQ6j5HpIYGZ3Gttth8ac317nxNg#map:id=3 
    function initialize() { 
     google.maps.visualRefresh = true; 
     var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) || 
     (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/)); 
     if (isMobile) { 
      var viewport = document.querySelector("meta[name=viewport]"); 
      viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no'); 
     } 
     var mapDiv = document.getElementById('googft-mapCanvas'); 
     mapDiv.style.width = isMobile ? '100%' : '900px'; 
     mapDiv.style.height = isMobile ? '100%' : '900px'; 
     var map = new google.maps.Map(mapDiv, { 
      center: new google.maps.LatLng(32.48632729547162, -108.729549109375), 
      zoom: 4, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open')); 
     map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend')); 

     layer = new google.maps.FusionTablesLayer({ 
      map: map, 
      heatmap: { enabled: false }, 
      query: { 
       select: "col3", 
       from: "1vKMjmiVb3eHCEnQ6j5HpIYGZ3Gttth8ac317nxNg", 
       where: "" 
      }, 
      options: { 
       styleId: 3, 
       templateId: 4 
      } 
     }); 

     google.maps.event.addlistener(layer, 'click', function() {    
      var selectedPlaceName = event.latlng.place.name; 
     }); 

     if (isMobile) { 
      var legend = document.getElementById('googft-legend'); 
      var legendOpenButton = document.getElementById('googft-legend-open'); 
      var legendCloseButton = document.getElementById('googft-legend-close'); 
      legend.style.display = 'none'; 
      legendOpenButton.style.display = 'block'; 
      legendCloseButton.style.display = 'block'; 
      legendOpenButton.onclick = function() { 
       legend.style.display = 'block'; 
       legendOpenButton.style.display = 'none'; 
      } 
      legendCloseButton.onclick = function() { 
       legend.style.display = 'none'; 
       legendOpenButton.style.display = 'block'; 
      } 
     } 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 

<body> 
    <div id="googft-mapCanvas"></div> 

    <div class='googft-info-window'> 
<b>name:</b> {name}<br> 
<b>id:</b> {id}<br> 
<b>geometry:</b> {geometry} 
</div> 
</body> 
</html> 
+0

我检查你的代码,并以其优良的工作单击它给细节,如名称:里诺 ID:NV-城市 几何:雷诺 –

回答

3

用途:place.name

下面是提供的位置名称onclick event的代码。

function initialize() { 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    center: new google.maps.LatLng(-33.8665433, 151.1956316), 
    zoom: 15 
    }); 

    var request = { 
    placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4' 
    }; 

    var infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(map); 

    service.getDetails(request, function(place, status) { 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(place.name);// Here you can set your place name 
     infowindow.open(map, this); 
     }); 
    } 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

了解更多详情请点击此链接:Google Map Place Details

+0

HOW TO GET文本框字段中的位置名称而不是弹出式菜单? – Vijayaraghavan

+0

$('#textboxId')。val(place.name); –