谷歌地圖 api 集群標記和自定義信息和圖標

Question

我有自定義圖標的問題。 我已經設法在標記上獲得不同的信息文本，我已經設法讓集群工作，但是當我添加 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>

Answer 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;
});

概念證明小提琴

代碼片段：

 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>

谷歌地圖 api 集群標記和自定義信息和圖標

問題描述

1 個解決方案

解決方案1
0 2018-02-04 14:54:30

谷歌地圖 api 集群標記和自定義信息和圖標

問題描述

1 個解決方案

解決方案1 0 2018-02-04 14:54:30

解決方案1
0 2018-02-04 14:54:30