删除谷歌地图自定义标记上的鼠标

Remove google maps custom marker on mouseout

本文关键字：鼠标 谷歌地图 自定义 删除      更新时间：2023-09-26

我创建的地图有多个区域用多边形勾画。当用户将鼠标移到某个部分上时，会弹出一个自定义标记，然后将鼠标移出，该标记就会消失。我已经得到了一切工作，但无法弄清楚如何让标记消失在鼠标。下面的代码不是每个部分，但我希望只是展示一个部分如何工作将提供足够的信息。我对地图API和javascript有点陌生，所以我希望我把第一部分设置好，但我希望有任何建议。我想我需要以某种方式访问noMarker函数中的标记…

    //Sets up the polygon    
    var mapWC = new google.maps.Polygon({
        paths: coordsWC,
        strokeColor: "#14b400",
        strokeOpacity: 0.5,
        strokeWeight: 3,
        fillColor: "#14b400",
        sectionName: "West Cambridge",
        markerImage: 'images/hood-marker.png',
        markerLL: new google.maps.LatLng(42.3751819960975,-71.15445431301595),
        fillOpacity: 0.33
        });
     mapWC.setMap(map);
//Mouse in and out
     google.maps.event.addListener(mapWC, 'mouseover', showMarker);
     google.maps.event.addListener(mapWC, 'mouseout', noMarker);
//functions
function showMarker(){
//var secName = this.sectionName;
//console.log(secName);
var image = this.markerImage;
var myLatLng = this.markerLL;
var themarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
} // End showMarker
function noMarker(){
//console.log("Moused Out");                
}

保持变量引用在javascript顶部声明的标记，如var marker;

查看我的JS小提琴:显示和隐藏标记在鼠标上下

编辑:我注意到我使用法线贴图而不是多边形来演示这一点-但相同的代码应该工作，因为多边形似乎支持相同的事件，见这里的列表:谷歌地图api多边形事件

好吧，这里是使用多边形的例子:JS fiddle polygon，技巧是存储标记到实际的多边形对象，所以它很容易访问，至少这是我认为:)-也如果你想添加几个多边形尝试将它们全部存储在数组中，而不是一些全局多边形变量;)干杯!

相关文章：