javascript - 修改 Google Maps Api 以显示基于国家/城市名称而不是 LatLng 的标记

Question

使用下面的代码，我可以将 map 居中定位到“立陶宛维尔纽斯”，并在位置数组的 map 中放置标记。

我的问题是如何避免循环中的 LatLng 而只使用名称？

var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
function initialize() {
var mapDiv = document.getElementById('map');
    var map;
    var address = "Vilnius, Lithuania";
    var geocoder = new google.maps.Geocoder();
    // Get LatLng information by name
    geocoder.geocode({
        "address": address
        }, function(results, status){
                map = new google.maps.Map(mapDiv, {
                // Center map (but check status of geocoder)
                center: results[0].geometry.location,
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
            })


                var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });



            }
        });

        }
        initialize();

Answer 1

您需要使用 geocoder将名称转换为坐标，以便在 map 上显示它们。

Google Maps Javascript API v3 地理编码器受到查询和速率限制，您可以在 map 上显示大约 10 个位置而无需处理。

如果您放置位置的地址(以及要在信息窗口中显示的一些文本)，只要地址有效并且少于 10 个，这就可以工作:

代码片段:

var center = "Vilnius, Lithuania";
var locations = [
  ['Tuskulėnų g. 20, Vilnius 09211, Lithuania', "some info"],
  ['Stumbrų g. 21, Vilnius 08101, Lithuania', "more information"],
  ['Kalvarijų g. 55, Vilnius 09317, Lithuania', "blah, blah"],
  ['Birželio 23-iosios g. 6, Vilnius 03204, Lithuania', "other information"],
  ['Teatro g. 6, Vilnius 03107, Lithuania', "to be determined"]
];


var geocoder;
var map;
var infoWin = new google.maps.InfoWindow();

function initialize() {
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(
    document.getElementById("map_canvas"));
  // center and zoom map on "center" address
  geocoder.geocode({
    address: center
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.fitBounds(results[0].geometry.bounds);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
  for (var i = 0; i < locations.length; i++) {
    codeAddress(locations[i], i);
  }

}

function codeAddress(location, i) {
  geocoder.geocode({
    'address': location[0]
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        title: "marker " + i,
        position: results[0].geometry.location
      });
      google.maps.event.addListener(marker, 'click', function(evt) {
        infoWin.setContent(location[0] + "<br>" + location[1]);
        infoWin.open(map, this);
      })
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

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

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>