如何在 javascript 谷歌地图上添加多个标记？答案

【问题标题】：How to add Multiple markers on javascript google maps?如何在 javascript 谷歌地图上添加多个标记？
【发布时间】：2021-07-22 14:15:09
【问题描述】：

您好，我正在尝试在我的应用程序上添加标记，但我仍然无法在我的地图上查看标记，这是我的代码：

TS：

loadMap(){

    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]
    ];

    //  alert('hi');
      //  let latLng = new google.maps.LatLng(13.08784, 80.27847);
     
       let mapOptions = {
         center: new google.maps.LatLng(-33.92, 151.25),
         zoom: 10,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       }
       
       var infowindow = new google.maps.InfoWindow();

    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: this.map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(Map, marker);
        }
      })(marker, i));


       this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
   
     }
    }

如何查看我的 Google 地图上的标记？有什么帮助吗？

【问题讨论】：

您在创建之前尝试使用this.map。查看 Javascript 控制台并弄清楚这一点有多难？
我看不到您在地图上实际添加标记的位置。我希望像 marker.setMap(map); 这样的电话
@MikeOne 代码看起来是正确的，除了我在之前的评论中提到的。无需使用setMap。
@MrUpsidown 我将其声明为 Map 但我仍然无法获得标记
@guru，是的，你有，但是在你使用它之后。在创建标记时，您使用的是map: this.map，但之后您要声明this.map = new google.maps.Map(...)。

标签： angular google-maps google-maps-markers

【解决方案1】：

看cmets...

function loadMap() {

  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]
  ];

  let mapOptions = {
    center: new google.maps.LatLng(-33.92, 151.25),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  
  // Moved this line up here
  this.map = new google.maps.Map(document.getElementById('map'), mapOptions); // changed the "native element" to a standard DOM element for the sake of this example

  var infowindow = new google.maps.InfoWindow();

  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: this.map // You are using this.map here so it needs to be created before
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(Map, marker);
      }
    })(marker, i));
  }
}

loadMap();

#map {
  height: 180px;
}

<div id="map"></div>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

【讨论】：