如何显示名称列表中的多个标记

Question

JavaScript

function loadMap(){
<!--set Map Options -->
var options = {
zoom: 9
};
<!--New map-->
var map = new google.maps.Map(document.getElementById('map'), options );
<!--Get location to put marker-->
var locations = document.querySelectorAll("[id='playgroundName']");
var bounds= new google.maps.LatLngBounds();
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker();
var infoWindowContent;
<!-- Calculate Latitude and Longitude for location -->
for (i=0; i!=locations.length; i++){
var loc = locations[i].value;
axios.get('https://maps.googleapis.com/maps/api/geocode/json',{
params:{
address:locations[i].value,
key:'Your_Key'
}
})
.then(function(response){
// Geometry
var lat = response.data.results[0].geometry.location.lat;
var lng = response.data.results[0].geometry.location.lng;
<!-- Add marker -->
marker[i] = new google.maps.Marker({
position : {lat: lat, lng: lng},
map : map,
title: loc
});
<!-- Info window for marker -->
infoWindowContent= {content:'<h4> ' + marker[i].title +' </h4>'};
infoWindow[i] = new google.maps.InfoWindow( infoWindowContent );
marker[i].addListener('click', function(){
infoWindow.open(map, marker[i]);
});
<!-- Form a boundary for map -->
bounds = new google.maps.LatLngBounds();
bounds.extend(marker[i].getPosition());
<!-- Fit all markers on a map -->
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
});
}
map.setZoom(9);
}

var locations = document.querySelectorAll("[id='playgroundName']");从百里香叶传来。 其中一个 locations.value = "Amberg Park" 或 "Barrett Brothers Park" 这是我想在地图上标记的公园名称之一。 我需要为每个名称创建 lat/lang 数组，并用这个数组放置标记

此代码在谷歌地图上显示标记，但每个标记都有相同的名称，信息窗口为每个标记显示相同(最后一个(信息窗口内容。拟合边界也不起作用。原因必须是不能在回调函数中使用循环 i 变量。我尝试使用不同的函数来获取位置数组，但效果也不好。

我也尝试了geocoder.geocode((来获取lat和lang。我不介意使用 axios/geocode((，只要我得到单个标记的纬度/lang。

Answer 1

这只是那些正在挣扎的人的示例代码。我有 3 个不同的数组，我需要处理其他内容以供以后使用，所以请不要判断代码。

这里的问题是，JavaScript 异步加载所有代码，而无需等待地理编码工作。所以 putmarker 函数在获得任何纬度/lang 之前正在执行。为了确保地理编码获得我使用的所有位置的纬度/朗 记录长度变量.

var locationLat = new Array();
var locationLng = new Array();
var locationAddress = new Array();
var map;
var recordsLength;
function loadMap(){
var options = {
zoom: 1
};
map = new google.maps.Map(document.getElementById('map'), options );
var locations = document.querySelectorAll("[id='playgroundName']");
hasGeocoded= false;
length = locations.length;
for (i=0; i!=locations.length; i++){
var address = locations[i].value;
var geocoder =  new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
var add = results[0].formatted_address;
createLatLngArray(lat,lng, add);
}
});
}
}
function createLatLngArray(lat, lng, add){
locationLat.push(lat);
locationLng.push(lng);
locationAddress.push(add);
if(locationLat.length == recordsLength)
{
putMarkers();
}
}
function putMarkers(){
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var marker, i;
for (i = 0; i < locationLat.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locationLat[i], locationLng[i]),
map: map
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locationAddress[i]);
infowindow.open(map, marker);
}
})(marker, i));
bounds.extend(marker.getPosition());
}
map.fitBounds(bounds);
}