本文介绍了Google Maps API和自定义标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用google maps api,并希望创建一些自定义标记,除了颜色之外,它们都是相同的,我不想重复这样的代码
I am using the google maps api and want to create some custom markers, they are all the same apart from the color, I don't want to repeat code like so
// 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,我该怎么做?
I would like to be able to declare one marker and then override the fillColor, how could i go about this ?
谢谢
推荐答案
一种选择是使用函数生成图标(即createIcon
函数),该函数将颜色作为参数并返回匿名的图标对象:
One option would be to use a function to generate the icon (i.e. a createIcon
function), which takes the color as an argument and returns the icon anonymous object:
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)
};
}
然后在创建标记时使用它:
Then use that when you create the markers:
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>
这篇关于Google Maps API和自定义标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!