当MapStyle更改时，GoogleMaps更改图标的标记 [英] GoogleMaps change icon's marker when MapStyle change

问题描述

我正在使用html/jsp页面的正文中的Google地图进行网络动态项目.

I am doing a web dynamic project with a Google map in a body of my html/jsp page.

我制作了一个函数，该函数借助(lat，lng，map)创建一个标记，并在标记的参数中使用特殊的image.png作为图标.

I made a function which create a marker thanks to (lat,lng,map) and use a special image.png as icon in the parameters of the marker.

在地图上，我制作了两种不同的样式(地图的颜色...):日"和夜".

In my map, I made two different styles (colors of map...) : "Day" and "Night".

我想知道当用户单击夜"更改样式时如何更改标记的图标.实际上，标记的颜色并不适合这种地图样式.

I want to know how can I change the icon of my marker when user click on Night to change the style. Indeed, the color of the marker is not good for this style of map...

我尝试使用相同的名称以不同的样式初始化var image =/.../...png，因此我可以在地图代码中使用var，但它不起作用.我也尝试过

I tried to initialize a var image = /.../...png in the different styles with the same name, so i can use the var in the map code, but it doesn't work. Also i tried a if like

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>

推荐答案

我开始了赏金计划，但最终我得到了答案.根据 google的文档，有 getMapTypeId()返回 MapTypeId 字符串(如"Jour"或"Nuit"(礼炮同胞！)).

I started a bounty, but finally I have an answer. Based on google's documentation, there's getMapTypeId() that return a MapTypeId string (like 'Jour' or 'Nuit' (salut compatriote !)).

因此，如果您拥有 markerList ，则可以执行以下操作:

So, if you hold a markerList you can do something like that:

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");
      }
    }
} );

根据此答案， maptypeid_changed 是在 mapTypeId 属性更改.

According to this answer, maptypeid_changed is a signal sent when mapTypeId property changes.

这篇关于当MapStyle更改时，GoogleMaps更改图标的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！