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

Question

I'd like to do this: http://bl.ocks.org/amenadiel/f4e5bd78b214ff081254我想这样做： http : //bl.ocks.org/amenadiel/f4e5bd78b214ff081254

In the example, markerLayer overrides ALL the markers on the map, and I'd only like it to apply to particular markers.在这个例子中，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>

It seems that using the js-rich-markers library is the best way forward for this kind of thing, makes it easier and 'targetable' for each marker.似乎使用 js-rich-markers 库是处理此类事情的最佳方法，它使每个标记更容易且“可定位”。

Here's the link: https://libraries.io/bower/js-rich-marker这是链接： https : //libraries.io/bower/js-rich-marker

Also for anyone looking for how to operate the js-rich-marker library, this question has a neat answer: Animate Google API Map Marker with CSS?同样对于任何寻找如何操作 js-rich-marker 库的人来说，这个问题有一个简洁的答案： Animate Google API Map Marker with CSS？

Answer 1

You just need to create a "regular" marker, like the third in my example:您只需要创建一个“常规”标记，就像我示例中的第三个：

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 个解决方案

解决方案1
1 已采纳 2017-01-20 19:47:02

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-01-20 19:47:02

解决方案1
1 已采纳 2017-01-20 19:47:02