[英]Google maps api and custom markers
我正在使用google maps api並想要創建一些自定義標記,除了顏色之外,它們都是一樣的,我不想重復這樣的代碼
// Add a custom marker
var marker1 = {
path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
fillColor: '#ff61b4',
fillOpacity: 0.95,
scale: 2,
strokeColor: '#fff',
strokeWeight: 3,
anchor: new google.maps.Point(12, 24)
};
var marker2 = {
path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
fillColor: '#05950a',
fillOpacity: 0.95,
scale: 2,
strokeColor: '#fff',
strokeWeight: 3,
anchor: new google.maps.Point(12, 24)
};
當我想使用標記
// Markers
var marker = new google.maps.Marker({
map: map,
icon: marker, // can i override the fillColor here ?
position: new google.maps.LatLng(51.489401, -3.203586),
title: 'title'
});
我希望能夠聲明一個標記,然后覆蓋fillColor,我該怎么辦?
謝謝
一種選擇是使用函數生成圖標(即createIcon
函數),該函數將顏色作為參數並返回圖標匿名對象:
function createIcon(color) {
return {
path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
fillColor: color,
fillOpacity: 0.95,
scale: 2,
strokeColor: '#fff',
strokeWeight: 3,
anchor: new google.maps.Point(12, 24)
};
}
然后在創建標記時使用它:
var marker1 = new google.maps.Marker({
map: map,
position: {
lat: 37.448,
lng: -122.143
},
icon: createIcon('#ff61b4')
});
代碼段:
function createIcon(color) { return { path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z', fillColor: color, fillOpacity: 0.95, scale: 2, strokeColor: '#fff', strokeWeight: 3, anchor: new google.maps.Point(12, 24) }; } function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new google.maps.Marker({ map: map, position: map.getCenter(), icon: createIcon('blue') }); var marker1 = new google.maps.Marker({ map: map, position: { lat: 37.448, lng: -122.143 }, icon: createIcon('#ff61b4') }) var marker2 = new google.maps.Marker({ map: map, position: { lat: 37.44, lng: -122.148 }, icon: createIcon('#05950a') }); } google.maps.event.addDomListener(window, "load", initialize);
html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas"></div>
您可以使用setOptions,例如:僅更改圖標
marker.setOptions({
icon = "http://labs.google.com/ridefinder/images/mm_20_white.png"
});
或可點擊
marker.setOptions({clickable:false});
因此您可以對所有標記選項執行相同的操作
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.