Javascript 谷歌地图API v3：如何动态更改标记图标？

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

我想做的是，当有人将鼠标悬停在一个链接上时，让地图上相应的标记图标改变颜色，以表示有问题的标记

本质上，与Roost的功能相同

---

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

调用

标记.setIcon（'newImage.png'）

。。。查找文档

你是在问实际的方法吗？您只需创建每个

div

，并添加一个

mouseover

和

mouseout

侦听器，即可更改标记的图标并返回

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

---

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

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

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

这应该足以让你继续前进

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

---

祝您好运（如果您仍然需要它）

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

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

然后，如果要动态更改标记（如在mouseover上），可以执行以下操作，例如：

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

你可以试试这个代码

    <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>

函数初始化（）
{
var映射；
var bounds=new google.maps.LatLngBounds（）；
变量映射选项={
缩放：10，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“mapDiv”）、mapOptions）；
变量标记=[
[title-1'，''，51.508742，-0.120850'，Hello-1
']，
[title-2'，''，51.508742，-0.420850'，你好-2
']，
[title-3'，''，51.508742，-0.720850，Hello-3
，
[title-4'，''，51.508742，-1.020850'，你好-4
']，
[title-5'，''，51.508742，-1.320850，你好-5
']
];
var infoWindow=new google.maps.infoWindow（），marker，i；
var testMarker=[]；
var状态=[]；
对于（i=0；i

MapIconMaker不适用于地图，但API v3的API v3不适用于地图。HTH。不幸的是，谷歌图表API最近被谷歌正式弃用：（这帮助我了解了如何更改标记的动画：

markersArray[0]。setAnimation（Google.maps.animation.BOUNCE）是的，但是更改地图指针是通过更改CSS中的游标属性来完成的，而不是在地图API中-请参阅“这可能会进一步指导您”。您的实时示例已经失败。只是想让您知道。我想这与airbnb.com上发生的情况类似？