鼠标悬停时Google Map多边形消失

Question

I'm drawing polygons on a Google Map using API v3 and attaching the mouseover and mouseout events to those polygons. 我正在使用API v3在Google Map上绘制多边形，并将mouseover和mouseout事件附加到这些多边形。 Basically, it's a map of 45 areas with polygons over a region. 基本上，这是一个45个区域的地图，每个区域上都有多边形。

I've drawn the two polygons on the map, but upon mouseout of the first polygon, it is disappeared. 我已经在地图上绘制了两个多边形，但是将mouseout第一个多边形后，它便消失了。 The second polygon is fine. 第二个多边形很好。 It is likely messing up to the second one. 这很可能搞乱了第二个。 The below is my complete source code. 以下是我完整的源代码。

<html>
<head>
    <title>GMap</title>
</head>
<body>
    <div id="gmap" style="width:1000px;height:400px"></div>
</body>
</html>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script type="text/javascript">
    var mapOptions = {
        zoom: 13,
        center: new google.maps.LatLng(16.798296, 96.173716)
    }
    var polyOptions = {
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000FF",
        fillOpacity: 0.6
    }
    var polyOptionsHover = {
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#00FF00",
        fillOpacity: 0.6
    }   
    var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);

    // First Polygon    
    var $path = [
        ["16.786217","96.134233"],
        ["16.782273","96.136894"],
        ["16.777014","96.136465"],
        ["16.773809","96.135092"],
        ["16.774631","96.128397"],
        ["16.779972","96.121359"],
        ["16.785806","96.119299"],
        ["16.791148","96.119299"],
        ["16.794845","96.119900"],
        ["16.797639","96.120329"],
        ["16.798132","96.124277"],
        ["16.798214","96.127796"],
        ["16.794024","96.133547"]
    ];
    var myCoordinates = [];
    for(i=0; i<$path.length; i++){  
        myCoordinates.push(new google.maps.LatLng($path[i][0], $path[i][1]));
    }
    var pOptions    = polyOptions;              
    pOptions.path   = myCoordinates;
    var polygon     = new google.maps.Polygon(pOptions);
    polygon.setMap(map);

    google.maps.event.addListener(polygon, "mouseover", function(){
        this.setOptions(polyOptionsHover);
    });
    google.maps.event.addListener(polygon, "mouseout", function(){
        this.setOptions(polyOptions);
    });

    // Second Polygon
    var $path = [
        ["16.782437","96.137066"],
        ["16.777014","96.136723"],
        ["16.774795","96.139040"],
        ["16.772247","96.147623"],
        ["16.781040","96.147795"],
        ["16.784656","96.142902"],
        ["16.785889","96.134834"]
    ];
    var myCoordinates = [];
    for(i=0; i<$path.length; i++){  
        myCoordinates.push(new google.maps.LatLng($path[i][0], $path[i][1]));
    }
    var pOptions    = polyOptions;              
    pOptions.path   = myCoordinates;
    var polygon     = new google.maps.Polygon(pOptions);
    polygon.setMap(map);

    google.maps.event.addListener(polygon, "mouseover", function(){
        this.setOptions(polyOptionsHover);
    });
    google.maps.event.addListener(polygon, "mouseout", function(){
        this.setOptions(polyOptions);
    });     
</script>

I use the array of coordinates and loop each one because they would be retrieved from the database. 我使用坐标数组并循环每个坐标，因为它们将从数据库中检索。

Answer 1

You are storing the path in the pOptions/polyOptions object. 您将路径存储在pOptions / polyOptions对象中。 Keep it separate. 分开放置。 Rather than: 而不是：

var pOptions    = polyOptions;              
pOptions.path   = myCoordinates;
var polygon     = new google.maps.Polygon(pOptions);
polygon.setMap(map);

do: 做：

var polygon     = new google.maps.Polygon(pOptions);
polygon.setPath(myCoordinates);
polygon.setMap(map);

鼠标悬停时Google Map多边形消失

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-02-26 14:03:40

鼠标悬停时Google Map多边形消失

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-02-26 14:03:40

解决方案1
0 已采纳 2014-02-26 14:03:40