使用下面的代码,我可以将地图居中到“维尔纽斯,立陶宛”,并在地图阵列上的地图中放置标记。
我的问题是如何避免循环中的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();
答案 0 :(得分:2)
您需要使用geocoder将名称转换为其坐标,以便在地图上显示这些名称。
Google Maps Javascript API v3地理编码器受查询和速率限制的约束,您可以在地图上显示大约10个位置而无需处理。
如果您放置位置的地址(以及一些文本显示在infowindow中),只要地址有效且少于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);
&#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;