如何在Google地圖自定義圖標中添加圓形形狀？

Question

我在地圖上的自定義圖像有問題。

例如： 我的圖標，以這種方式產生，並且圖標包含圖像：

var ic = { //icon 
     url: icon, // url 
     scaledSize: new google.maps.Size(30, 30), // scaled size 
     origin: new google.maps.Point(0,0), // origin 
     anchor: new google.maps.Point(0, 0), // anchor 
     //define the shape 
     //define the shape 
     shape:{coords:[17,17,18],type:'circle'}, 
     //set optimized to false otherwise the marker will be rendered via canvas 
     //and is not accessible via CSS 
     optimized:false, 
     title: 'spot' 

    }; 

    var marker = new google.maps.Marker({ 
     map: map, title: name , position: latlngset, icon: ic 
    }); 

我想使我的圖標，如CSS 50％半徑（圓形）。 我該怎麼做？

Answer 1

相關問題：JS Maps v3: custom marker with user profile picture

從那裏使用代碼，並改變邊界半徑至50％，給了我在圈內的圖像的圓形圖標。

proof of concept fiddle

//adapted from http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html 
 
function CustomMarker(latlng, map, imageSrc) { 
 
    this.latlng_ = latlng; 
 
    this.imageSrc = imageSrc; 
 
    // Once the LatLng and text are set, add the overlay to the map. This will 
 
    // trigger a call to panes_changed which should in turn call draw. 
 
    this.setMap(map); 
 
} 
 

 
CustomMarker.prototype = new google.maps.OverlayView(); 
 

 
CustomMarker.prototype.draw = function() { 
 
    // Check if the div has been created. 
 
    var div = this.div_; 
 
    if (!div) { 
 
    // Create a overlay text DIV 
 
    div = this.div_ = document.createElement('div'); 
 
    // Create the DIV representing our CustomMarker 
 
    div.className = "customMarker" 
 

 

 
    var img = document.createElement("img"); 
 
    img.src = this.imageSrc; 
 
    div.appendChild(img); 
 
    google.maps.event.addDomListener(div, "click", function(event) { 
 
     google.maps.event.trigger(me, "click"); 
 
    }); 
 

 
    // Then add the overlay to the DOM 
 
    var panes = this.getPanes(); 
 
    panes.overlayImage.appendChild(div); 
 
    } 
 

 
    // Position the overlay 
 
    var point = this.getProjection().fromLatLngToDivPixel(this.latlng_); 
 
    if (point) { 
 
    div.style.left = point.x + 'px'; 
 
    div.style.top = point.y + 'px'; 
 
    } 
 
}; 
 

 
CustomMarker.prototype.remove = function() { 
 
    // Check if the overlay was on the map and needs to be removed. 
 
    if (this.div_) { 
 
    this.div_.parentNode.removeChild(this.div_); 
 
    this.div_ = null; 
 
    } 
 
}; 
 

 
CustomMarker.prototype.getPosition = function() { 
 
    return this.latlng_; 
 
}; 
 

 
var map = new google.maps.Map(document.getElementById("map"), { 
 
    zoom: 17, 
 
    center: new google.maps.LatLng(37.77088429547992, -122.4135623872337), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
}); 
 

 
var data = [{ 
 
    profileImage: "http://www.gravatar.com/avatar/d735414fa8687e8874783702f6c96fa6?s=90&d=identicon&r=PG", 
 
    pos: [37.77085, -122.41356], 
 
}, { 
 
    profileImage: "http://placekitten.com/90/90", 
 
    pos: [37.77220, -122.41555], 
 
}] 
 

 
for (var i = 0; i < data.length; i++) { 
 
    new CustomMarker(new google.maps.LatLng(data[i].pos[0], data[i].pos[1]), map, data[i].profileImage) 
 
}

.customMarker { 
 
    position: absolute; 
 
    cursor: pointer; 
 
    background: #424242; 
 
    width: 100px; 
 
    height: 100px; 
 
    /* -width/2 */ 
 
    margin-left: -50px; 
 
    /* -height + arrow */ 
 
    margin-top: -110px; 
 
    border-radius: 50%; 
 
    padding: 0px; 
 
} 
 

 
.customMarker:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -10px; 
 
    left: 40px; 
 
    border-width: 10px 10px 0; 
 
    border-style: solid; 
 
    border-color: #424242 transparent; 
 
    display: block; 
 
    width: 0; 
 
} 
 

 
.customMarker img { 
 
    width: 90px; 
 
    height: 90px; 
 
    margin: 5px; 
 
    border-radius: 50%; 
 
}

<script src="https://maps.google.com/maps/api/js"></script> 
 
<div id="map" style="width: 640pxpx; height: 480px;">map div</div>

Answer 2

如果你想製作一個圓形標記只需檢查documentation這是更快，更輕量。

否則，只需使您的實際圖標變成圓形。