Question

我想这样做：http://bl.ocks.org/amenadiel/f4e5bd78b214ff081254

在示例中，markerLayer会覆盖地图上的所有标记，我只希望将其应用于特定标记。

var myoverlay = new google.maps.OverlayView();
myoverlay.draw = function() {
  //this assigns an id to the markerlayer Pane, so it can be referenced by CSS
  this.getPanes().markerLayer.id = 'markerLayer';
};
myoverlay.setMap(map);

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map-canvas {
      height: 500px;
      width: 960px;
      margin: 0px;
      padding: 0px
    }
    #markerLayer img {
      border: 2px solid red !important;
      width: 85% !important;
      height: 90% !important;
      border-radius: 5px;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  <script>
    var map;

    function initialize() {
      var mapOptions = {
        zoom: 9,
        center: new google.maps.LatLng(40.6, -74)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      // I create 3 markers using http://ruralshores.com/assets/marker-icon.png as icon
      var myIcon = 'http://ruralshores.com/assets/marker-icon.png';
      var marker1 = new google.maps.Marker({
        position: {
          lat: 40.8,
          lng: -74
        },
        map: map,
        icon: myIcon,
        optimized: false
      });
      var marker2 = new google.maps.Marker({
        position: {
          lat: 40.6,
          lng: -74.5
        },
        map: map,
        icon: myIcon,
        optimized: false
      });
      var marker3 = new google.maps.Marker({
        position: {
          lat: 40.5,
          lng: -74.3
        },
        map: map,
        icon: myIcon,
        optimized: false
      });

      // I create an OverlayView, and set it to add the "markerLayer" class to the markerLayer DIV
      var myoverlay = new google.maps.OverlayView();
      myoverlay.draw = function() {
        this.getPanes().markerLayer.id = 'markerLayer';
      };
      myoverlay.setMap(map);

    }


    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <div id="map-canvas"></div>
</body>

</html>

似乎使用js-rich-markers库是此类事情的最佳前进方式，使每个标记更容易和“可定位”。

以下是链接：https://libraries.io/bower/js-rich-marker

对于那些正在寻找如何操作js-rich-marker库的人来说，这个问题有一个简洁的答案：Animate Google API Map Marker with CSS?

Answer 1

你只需要创建一个“常规”标记，就像我的例子中的第三个：

var marker3 = new google.maps.Marker({
    position: {
          lat: 40.5,
          lng: -74.3
    },
    map: map,
    optimized: true // This will NOT draw the marker in the custom `draw` function
});

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map-canvas {
      height: 500px;
      width: 960px;
      margin: 0px;
      padding: 0px
    }
    #markerLayer img {
      border: 2px solid red !important;
      width: 85% !important;
      height: 90% !important;
      border-radius: 5px;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  <script>
    var map;

    function initialize() {
      var mapOptions = {
        zoom: 9,
        center: new google.maps.LatLng(40.6, -74)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      // I create 3 markers using http://ruralshores.com/assets/marker-icon.png as icon
      var myIcon = 'http://ruralshores.com/assets/marker-icon.png';
      var marker1 = new google.maps.Marker({
        position: {
          lat: 40.8,
          lng: -74
        },
        map: map,
        icon: myIcon,
        optimized: false
      });
      var marker2 = new google.maps.Marker({
        position: {
          lat: 40.6,
          lng: -74.5
        },
        map: map,
        icon: myIcon,
        optimized: false
      });
      var marker3 = new google.maps.Marker({
        position: {
          lat: 40.5,
          lng: -74.3
        },
        map: map,
        optimized: true
      });

      // I create an OverlayView, and set it to add the "markerLayer" class to the markerLayer DIV
      var myoverlay = new google.maps.OverlayView();
      myoverlay.draw = function() {
        this.getPanes().markerLayer.id = 'markerLayer';
      };
      myoverlay.setMap(map);

    }


    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <div id="map-canvas"></div>
</body>

</html>

如何使用Google Maps API自定义不同的标记CSS？

1 个答案: