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

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 数组，并用这个数组放置标记

此代码在 google 地图上显示标记，但每个标记都有相同的名称，信息窗口为每个标记显示相同（最后）的信息窗口内容。适合范围也不起作用。原因一定是不能在回调函数中使用 for loop i 变量。我尝试使用不同的函数来获取位置数组，但效果也不佳。

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

Answer 1

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

这里的问题是，JavaScript 是在不等待地理编码工作的情况下异步加载所有代码。所以 putmarkers 函数在获取任何 lat/lang 之前执行。为确保地理编码获得所有位置的 lat/lang，我使用了 recordsLength 变量。

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);
}

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

How to show multiple markers from a list of names

javascript

google-maps

geocode

axios