如何获取谷歌地图以获取位置名称?

时间:2015-05-06 08:37:58

标签: javascript

点击Google地图时,任何人都可以帮助您获取位置名称。

E.g: 如果我要点击美国各州,如“德克萨斯州或阿拉巴马州”的位置标记,那么在onclick时需要获得准确的值。

如果有其他方法可以获取位置名称。如果它可能,那么请分享你的经验。等待你的重播。

以下是我的代码:

<!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>

1 个答案:

答案 0 :(得分:4)

使用: 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