Google地图-自定义标记图标显示在默认图标下

Question

I would like to add a marker with a custom icon on the map.

 marker = new google.maps.Marker({
   position: coords,
   map: map
 });        
if(attrs.icon)
    marker.setIcon(attrs.icon);

Doing this will add a new marker on the map, but it adds the custom icon under the default icon (red location symbol). This is strange. Any ideas?

Answer 1

Ordinarily, you would add a custom icon using the following:

  var image = 'http://i.imgur.com/OG4CZt3.png';
  var beachMarker = new google.maps.Marker({
    position: {lat: -33.890, lng: 151.274},
    map: map,
    icon: image
  });

---

Here is the full snippet, from the docs

 #map { height: 250px; } 

 <div id="map"></div> <script> // This example adds a marker to indicate the position of Bondi Beach in Sydney, // Australia. function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: {lat: -33, lng: 151} }); var image = 'http://i.imgur.com/OG4CZt3.png'; var beachMarker = new google.maps.Marker({ position: {lat: -33.890, lng: 151.274}, map: map, icon: image }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap"></script> 

Doing it this way should prevent the custom icon from appearing beneath the default.