Question

我正在使用marker cluster使用info window数据创建json。我收到google.maps.Markers is not a constructor错误。标记群集未显示

这是我的代码：

var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: {"lat": 39.317779, "lng": -101.459656},
            mapTypeId: 'roadmap',
          });
          map.setTilt(45);

          for(var i=0;i<locations.length;i++){
            var data=locations[i];
            var mylatlng=new google.maps.LatLng(locations.lat,locations.lng);
            var markers = new google.maps.Markers({
              position:mylatlng,
              map:map

            });
            (function(marker,data){
              google.maps.event.addListener(marker,'click',function(e){
                infowindow.setContent(data.code +
                          '<br/>' + data.PIN +
                          '<br/><b>STOCKNO:</b> ' + data.No +
                          '<br/><b>STATUS:</b> ' + data.Status);
                infowindow.open(map, marker);
              })
            })(marker,data);
            }

          var markerCluster = new MarkerClusterer(map, markers,
                  {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

}

小提琴：https://jsfiddle.net/ram6gpz1/1/

为什么我收到此错误？我做错了什么？有什么建议吗？

Answer 1

您可以使用解决方案https://jsfiddle.net/ram6gpz1/7/

＆＃13;

$(document).ready(function(){
  initialization() 
});

function initialization() {
        
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {"lat": 39.317779, "lng": -101.459656},
    mapTypeId: 'roadmap',
  });
  map.setTilt(45);

  for(var i=0;i<locations.length;i++){
    var data=locations[i];
    var marker = new google.maps.Marker({
      position: {lat: data.lat, lng: data.lng},
      map : map
    });

    attachSecretMessage(marker, i);

  }

  function attachSecretMessage(marker, i) {
    var data = locations[i];

      secretMessage = `${data.code} 
        <br/>${data.PIN} 
        <br/><b>STOCKNO:</b>${data.No}
        <br/><b>STATUS:</b>${data.Status}`;

      var infowindow = new google.maps.InfoWindow({
        content: secretMessage
      });

      marker.addListener('click', function() {
        infowindow.open(marker.get('map'), marker);
      });
  }

}

         
var locations = [{
 "No": 67000052704,
 "PIN": "JF2FH327573",
 "Status": "Not Available",
 "lat": 32.8781453358752,
 "lng": -97.3715011598119,
 "code": "Gate6"
},
{
 "No": 6700064837,
 "PIN": "WBA53050",
 "Status": "Available",
 "lat": 34.0026085052726,
 "lng": -83.7873632217882,
 "code": "Gate2"
},
{
 "No": 2000544837,
 "PIN": "WBA53EVW530",
 "Status": "Available",
 "lat": 34.0026085052726,
 "lng": -83.7873632217882,
 "code": "Gate1"
}];

＆＃13;

<div id="map"></div>

＆＃13;

更新了解决方案 这是解决方案https://jsfiddle.net/ram6gpz1/9/

＆＃13;

 $(document).ready(function(){
        initialization() 
});

function initialization() {
        
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {"lat": 39.317779, "lng": -101.459656},
    mapTypeId: 'roadmap',
  });
  map.setTilt(45);
  var infoWin = new google.maps.InfoWindow();
  var markers = locations.map(function(location, i) {

    var marker = new google.maps.Marker({
      position: {lat: location.lat, lng: location.lng}
    });
    google.maps.event.addListener(marker, 'click', function(evt) {
      infoWin.setContent(`${location.code} 
      <br/>${location.PIN} 
      <br/><b>STOCKNO:</b>${location.No}
      <br/><b>STATUS:</b>${location.Status}`);
      infoWin.open(map, marker);
    })

    return marker;
  });


  var markerCluster = new MarkerClusterer(map, markers,
          {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

}

         
var locations = [{
  "No": 67000052704,
  "PIN": "JF2FH327573",
  "Status": "Not Available",
  "lat": 32.8781453358752,
  "lng": -97.3715011598119,
  "code": "Gate6"
},
{
  "No": 6700064837,
  "PIN": "WBA53050",
  "Status": "Available",
  "lat": -19.9286,
  "lng": -43.93888,
  "code": "Gate2"
},
{
  "No": 2000544837,
  "PIN": "WBA53EVW530",
  "Status": "Available",
  "lat": -19.85758,
  "lng": -43.9668,
  "code": "Gate1"
}];

＆＃13;

#map{
  height:500px;
  width:500px;
}

＆＃13;

<div id="map"></div>

＆＃13;

另外，我稍微更新了位置，看看那个。要查找群集，您需要缩小。

希望这能解决您的问题。

Answer 2

你做了一个小错字。如果new google.maps.Markers new google.maps.Marker，则<form action=""method="post" id="save_menu"> {注意缺少＆＃34; s＆＃34;最后）。

TypeError：google.maps.Markers不是构造函数

2 个答案: