MapStyle更改时Google Maps更改图标标记答案

【问题标题】：GoogleMaps change icon's marker when MapStyle changeMapStyle更改时Google Maps更改图标标记
【发布时间】：2016-03-11 18:44:24
【问题描述】：

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

由于 (lat,lng,map) 我做了一个函数来创建一个标记，并在标记的参数中使用一个特殊的 image.png 作为图标。

在我的地图中，我制作了两种不同的样式（地图的颜色...）：“白天”和“夜晚”。

我想知道当用户单击 Night 以更改样式时如何更改标记的图标。确实，marker的颜色不适合这种风格的地图……

我尝试用同名的不同样式初始化 var image = /.../...png，所以我可以在地图代码中使用 var，但它不起作用。我也试过一个 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>

【问题讨论】：

如果您需要更多信息，请告诉我
你如何将“Day”放在这里 mapTypeIds.equals(Day)？我不确定，但可能包括 if..else 在内的这部分代码没有执行，它正在设置自定义图标。
在我的代码中我没有这个“如果”，我只是试了一下，把它放在 navigator.geolocation.getCurrent Position(...) 之后。只是不要在上面的代码中考虑它。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

我开始了赏金，但最终我得到了答案。基于google's documentation，有getMapTypeId() 返回一个MapTypeId 字符串（如'Jour' 或'Nuit'（向同胞致敬！））。

所以，如果你持有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属性变化时发送的信号。

【讨论】：

【解决方案2】：

您是否尝试过使用 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 的简单更改来完成。我希望我能让你知道如何更改标记。

【讨论】：