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

大佬教程收集整理的这篇文章主要介绍了如何在 javascript 谷歌地图上添加多个标记？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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 地图上的标记？有什么帮助吗？

解决方法

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>

大佬总结

以上是大佬教程为你收集整理的如何在 javascript 谷歌地图上添加多个标记？全部内容，希望文章能够帮你解决如何在 javascript 谷歌地图上添加多个标记？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。