javascript - Google map Api 标记不适用于多个位置

Question

我有一个谷歌地图API，我在 map 上放置了多个位置，但不幸的是我的位置标记没有出现在 map 上，我不知道我的数组或我声明的对象是否有问题，所有我需要的是在两个位置放置一些多个标记，这是示例代码

var map;

function initMap() {
  var manilaMain = {
    info: "<strong>Chipotle on Broadway</strong><br>\
                            5224 N Broadway St<br> Chicago, IL 60640<br>\
Get Directions</a>",
    lat: 14.5995124,
    lng: 120.9842195

  };

  var manilaHospital = {
    info: "<strong>Chipotle on Broadway</strong><br>\
                            5224 N Broadway St<br> Chicago, IL 60640<br>",
    lat: 14.609189,
    lng: 120.966466

  };

  var locations = [
    [manilaMain.lat, manilaMain.lng, manilaMain.info, 0],
    [manilaHospital.lat, manilaHospital.lng, manilaHospital.info, 1],
  ];


  var newCent = new google.maps.LatLng(14.5995124, 120.9842195);

  map = new google.maps.Map(document.getElementById('hplus-map'), {
    center: newCent,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    draggable: false,
    scrollwheel: false
  });

  var infowindow = new google.maps.InfoWindow({
    // content: contentString,
    // maxWidth: 600
  });



  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1]),
      map: map

    });


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

  }


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hplus-map">

</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBO3K_aCpewx5lqVbthR2YOHXvX5pHMLWU&callback=initMap" async defer></script>

Answer 1

您的标记创建代码中有一个拼写错误:

marker = new google.maps.Marker({
  position: new google.maps.LatLng(locations[i][1]),
  map: map

});

position google.maps.LatLng 对象有两个参数，您只给它一个。应该是:

  position: new google.maps.LatLng(locations[i][0],locations[i][1]),

代码片段:

html,
body,
#hplus-map {
  height: 100%;
  width: 100%;
}

<div id="hplus-map"></div>
<script>
  var map;

  function initMap() {
    var manilaMain = {
      info: "<strong>Manila Main</strong><br>5224 N Broadway St<br> Chicago, IL 60640<br>Get Directions</a>",
      lat: 14.5995124,
      lng: 120.9842195
    };

    var manilaHospital = {
      info: "<strong>Manila Hospital</strong><br>5224 N Broadway St<br> Chicago, IL 60640<br>",
      lat: 14.609189,
      lng: 120.966466
    };

    var locations = [
      [manilaMain.lat, manilaMain.lng, manilaMain.info, 0],
      [manilaHospital.lat, manilaHospital.lng, manilaHospital.info, 1],
    ];

    var newCent = new google.maps.LatLng(14.5995124, 120.9842195);

    map = new google.maps.Map(document.getElementById('hplus-map'), {
      center: newCent,
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      draggable: false,
      scrollwheel: false
    });

    var infowindow = new google.maps.InfoWindow({
      // content: contentString,
      // maxWidth: 600
    });

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][2]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>