Google Maps API v3：如何动态更改标记图标？

Posted 2023-02-23

【中文标题】Google Maps API v3：如何动态更改标记图标？

【英文标题】：Google Maps API v3: How do I dynamically change the marker icon?

【发布时间】：2010-12-28 19:33:54

【问题描述】：

使用 Google Maps API v3，我如何以编程方式更改标记图标？

我想做的是，当有人将鼠标悬停在链接上时 - 让地图上的相应标记图标更改颜色以表示相关标记。

本质上，与 Roost 的功能相同。

当您将鼠标悬停在左侧的房源上时，右侧的相应标记会改变颜色

【问题讨论】：

您的实例已失效。只是想让你知道。我认为这与 airbnb.com 上发生的情况类似？

【参考方案1】：

致电marker.setIcon('newImage.png')...查看here 获取文档。

您是在询问实际的方法吗？您可以只创建每个div，并添加一个mouseover 和mouseout 侦听器，这将更改图标并返回标记。

【讨论】：

帮助我弄清楚如何更改标记的动画：markersArray[0].setAnimation(google.maps.Animation.BOUNCE);

【参考方案2】：

GMaps Utility Library 有一个名为MapIconMaker 的插件，可以轻松生成不同的标记样式。它使用谷歌图表来绘制标记。

有一个很好的演示 here 展示了你可以用它制作什么样的标记。

【讨论】：

MapIconMaker 不适用于地图 API v3

StyledMarker for API v3 是。 HTH。

不幸的是，Google Charts API 最近已被 Google 正式弃用：(

【参考方案3】：

这个线程可能已经死了，但StyledMarker 可用于 API v3。只需使用 addDomListener() 方法将您想要的颜色更改绑定到正确的 DOM 事件。这个example 非常接近您想要做的事情。如果你查看页面源，更改：

google.maps.event.addDomListener(document.getElementById("changeButton"),"click",function() 
  styleIcon.set("color","#00ff00");
  styleIcon.set("text","Go");
);

类似于：

google.maps.event.addDomListener("mouseover",function() 
  styleIcon.set("color","#00ff00");
  styleIcon.set("text","Go");
);

这应该足以让你继续前进。

DOM Events 上的 Wikipedia 页面也将帮助您定位要在客户端捕获的事件。

祝你好运（如果你还需要它）

【讨论】：

是的，但是更改地图指针是通过更改 CSS 中的光标属性来完成的，而不是在地图 API 中 - 请参阅 documentation

这个*** question and answers 可能会进一步指导您。

【参考方案4】：

您也可以使用圆圈作为标记图标，例如：

var oMarker = new google.maps.Marker(
    position: latLng,
    sName: "Marker Name",
    map: map,
    icon: 
        path: google.maps.SymbolPath.CIRCLE,
        scale: 8.5,
        fillColor: "#F00",
        fillOpacity: 0.4,
        strokeWeight: 0.4
    ,
);

然后，如果您想动态更改标记（如鼠标悬停），您可以，例如：

oMarker.setIcon(
            path: google.maps.SymbolPath.CIRCLE,
            scale: 10,
            fillColor: "#00F",
            fillOpacity: 0.8,
            strokeWeight: 1
        )

【参考方案5】：

你可以试试这个代码

    <script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

<script>

    function initialize()
    
        var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = 
                            zoom: 10,
                            mapTypeId: google.maps.MapTypeId.ROADMAP    
                         ;
        map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);
        var markers = [
            ['title-1', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.120850, '<p> Hello - 1 </p>'],
            ['title-2', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.420850, '<p> Hello - 2 </p>'],
            ['title-3', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.720850, '<p> Hello - 3 </p>'],
            ['title-4', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.020850, '<p> Hello - 4 </p>'],
            ['title-5', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.320850, '<p> Hello - 5 </p>']
        ];

        var infoWindow = new google.maps.InfoWindow(), marker, i;
        var testMarker = [];
        var status = [];
        for( i = 0; i < markers.length; i++ ) 
        
            var title = markers[i][0];
            var loan = markers[i][1];
            var lat = markers[i][2];
            var long = markers[i][3];
            var add = markers[i][4];


            var iconGreen = 'img/greenMarker.png'; //green marker
            var iconRed = 'img/redMarker.png';     //red marker

            var infoWindowContent = loan + "\n" + placeId + add;

            var position = new google.maps.LatLng(lat, long);
            bounds.extend(position);

            marker = new google.maps.Marker(
                map: map,
                title: title,
                position: position,
                icon: iconGreen
            );
            testMarker[i] = marker;
            status[i] = 1;
            google.maps.event.addListener(marker, 'click', ( function toggleBounce( i,status,testMarker) 
            
                return function() 
                
                    infoWindow.setContent(markers[i][1]+markers[i][4]);
                    if( status[i] === 1 )
                    
                        testMarker[i].setIcon(iconRed);
                        status[i] = 0;

                    
                    for( var k = 0; k <  markers.length ; k++ )
                    
                        if(k != i)
                        
                            testMarker[k].setIcon(iconGreen);
                            status[i] = 1;

                        
                    
                    infoWindow.open(map, testMarker[i]);
                
            )( i,status,testMarker));
            map.fitBounds(bounds);
        
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event)
        
            this.setZoom(8);
            google.maps.event.removeListener(boundsListener);
        );
    
    google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id="mapDiv" style="width:820px; height:300px"></div>