谷歌地图 api 集群标记和自定义信息和图标答案

【问题标题】：Google maps api cluster marker and custom info and icon谷歌地图 api 集群标记和自定义信息和图标
【发布时间】：2018-02-04 14:23:04
【问题描述】：

我在使用自定义图标时遇到了问题。我设法在标记上获得了不同的信息文本，我设法让集群工作，但是当我添加 var icon1 和 var icon2 并将它们放在位置数组中时：“icon：icon2。全部失败，有没有办法同时使用图标、信息窗口和集群标记？

<!DOCTYPE html>
    <html>
      <head>
       <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Clustering</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      function initMap() {




        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: {lat: 63.418719, lng: 10.3685516}

        });


         var icon1 = {
        url: "https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png", // url
        scaledSize: new google.maps.Size(50, 50), // size
        };

         var icon2 = {
        url: "https://maps.google.com/mapfiles/kml/shapes/library_maps.png", // url
        scaledSize: new google.maps.Size(50, 50), // size
        };


        var infoWin = new google.maps.InfoWindow();
        var markers = locations.map(function(location, i) {
            var marker = new google.maps.Marker({
                position:location
            });
            google.maps.event.addListener(marker, 'click', function(evt) {
                infoWin.setContent(location.info);
                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 = [
        {lat: 63.131623,  lng: 10.370243, info:"Test1", icon: icon1},
        {lat: 62.432600,  lng: 10.300243, info:"Test2", icon: icon2},
        {lat: 62.330642,  lng: 10.300243, info:"Test2", icon: icon1},
        {lat: 63.530691,  lng: 10.300243, info:"Test2", icon: icon2},



      ]
    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzoVQ&callback=initMap">
    </script>
  </body>
</html>

【问题讨论】：

您的代码出现 javascript 错误：Uncaught ReferenceError: icon1 is not defined。此外，发布的代码实际上并未使用位置数组中定义的图标。

标签： javascript api google-maps maps

【解决方案1】：

要实际使用位置数组中的图标，请更改标记定义：

var markers = locations.map(function(location, i) {
    var marker = new google.maps.Marker({
        position:location
    });
    google.maps.event.addListener(marker, 'click', function(evt) {
        infoWin.setContent(location.info);
        infoWin.open(map, marker);
    })
  return marker;
});

收件人：

var markers = locations.map(function(location, i) {
  var marker = new google.maps.Marker({
    position: location,
    icon: location.icon  // <--------------------------------add this
  });
  google.maps.event.addListener(marker, 'click', function(evt) {
    infoWin.setContent(location.info);
    infoWin.open(map, marker);
  })
  return marker;
});

proof of concept fiddle

代码 sn-p：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: 63.418719,
      lng: 10.3685516
    }

  });
  var infoWin = new google.maps.InfoWindow();
  var markers = locations.map(function(location, i) {
    var marker = new google.maps.Marker({
      position: location,
      icon: location.icon
    });
    google.maps.event.addListener(marker, 'click', function(evt) {
      infoWin.setContent(location.info);
      infoWin.open(map, marker);
    })
    return marker;
  });

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

var icon1 = {
  url: "https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png", // url
  scaledSize: new google.maps.Size(50, 50), // size
};

var icon2 = {
  url: "https://maps.google.com/mapfiles/kml/shapes/library_maps.png", // url
  scaledSize: new google.maps.Size(50, 50), // size
};

var locations = [{
  lat: 63.131623,
  lng: 10.370243,
  info: "Test1",
  icon: icon1
}, {
  lat: 62.432600,
  lng: 10.300243,
  info: "Test2",
  icon: icon2
}, {
  lat: 62.330642,
  lng: 10.300243,
  info: "Test2",
  icon: icon1
}, {
  lat: 63.530691,
  lng: 10.300243,
  info: "Test2",
  icon: icon2
}, ]
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="map"></div>

【讨论】：