我正在我的html / jsp页面中使用Google地图进行网页动态项目。
由于(lat,lng,map)我创建了一个创建标记的函数,并在标记的参数中使用了特殊的image.png作为图标。
在我的地图中,我制作了两种不同的风格(地图的颜色......):“日”和“夜”。
我想知道当用户点击“夜晚”以更改样式时,如何更改标记的图标。实际上,标记的颜色对于这种风格的地图并不好......
我尝试使用相同名称初始化不同样式的var image = /.../...png,因此我可以在地图代码中使用var,但它不起作用。我也尝试过如果
if(map.mapTypeControlOptions.mapTypeIds.equals(Day)){
var image=...png
} else {
var image=...png
}...
customMapTypeIdJour<div id="map"></div>
<script>
function initMap() {
var customMapTypeNuit = new google.maps.StyledMapType([
{
"featureType": "landscape.man_made", "elementType": "geometry.fill", "stylers": [ { "color": "#2b3f57" } ]
},
// ... the style of map
{
name: 'Nuit'
}
);
var customMapTypeJour = new google.maps.StyledMapType([
// a style of map
{
name: 'Jour'
}
);
var customMapTypeIdJour = 'Jour';
var customMapTypeIdNuit = 'Nuit';
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 43.6666, lng: 1.43333},
zoom: 17,
streetViewControl: false,
zoomControl: false,
mapTypeControlOptions: {
mapTypeIds: [customMapTypeIdJour, customMapTypeIdNuit]
}
});
map.mapTypes.set(customMapTypeIdNuit, customMapTypeNuit);
map.mapTypes.set(customMapTypeIdJour, customMapTypeJour);
map.setMapTypeId(customMapTypeIdJour);
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Vous êtes ici.');
createMarqueur(lat, lng, map); // create a special marker with a special image as icon
map.setCenter(pos);
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
答案 0 :(得分:7)
我开始了赏金,但最后我得到了答案。基于google's documentation,getMapTypeId()
返回MapTypeId
字符串(如'Jour'或'Nuit'(salut compatriote!))。
所以,如果你持有markerList
,你可以这样做:
google.maps.event.addListener( map, 'maptypeid_changed', function() {
if(map.getMapTypeId() == "Nuit"){
for(var i=0;i<markerList.length;i++){
markerList[i].setIcon("/resources/img/nuit.png");
}
}
else{
for(var i=0;i<markerList.length;i++){
markerList[i].setIcon("/resources/img/jour.png");
}
}
} );
根据this回答,maptypeid_changed
是mapTypeId
属性更改时发送的信号。
答案 1 :(得分:5)
你尝试使用svg图形吗?您可以使用javascript轻松更改其外观。
您必须使用Corel Draw,Adobe Illustrator或任何其他免费程序等矢量编辑器软件制作标记的svg。在文本编辑器中打开生成的文件,您会发现类似的内容。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25000 6000">
<path d=" <!--svg path here--> ">
</svg>
你申请css:
svg path{fill:red} /*any color here*/
您希望使用javascript更改颜色所做的任何更改都可以使用上述css的简单更改来完成。我希望我能告诉你如何改变标记。