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

时间:2015-11-20 21:57:35

标签: javascript jquery google-maps

使用下面的代码,我可以将地图居中到“维尔纽斯,立陶宛”,并在地图阵列上的地图中放置标记。

我的问题是如何避免循环中的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();

1 个答案:

答案 0 :(得分:2)

您需要使用geocoder将名称转换为其坐标,以便在地图上显示这些名称。

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

如果您放置位置的地址(以及一些文本显示在infowindow中),只要地址有效且少于10个,这将有效:

代码段

&#13;
&#13;
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);
&#13;
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
&#13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
&#13;
&#13;
&#13;