Question

我正在使用API v3在Google地图上绘制多边形，并将mouseover和mouseout事件附加到这些多边形。基本上，它是一个45个区域的地图，其中一个区域有多边形。

我在地图上绘制了两个多边形，但是在第一个多边形的mouseout上，它就消失了。第二个多边形很好。它很可能搞砸第二个。以下是我的完整源代码。

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

我使用坐标数组并循环每个坐标，因为它们将从数据库中检索。

Answer 1

您将路径存储在pOptions / polyOptions对象中。保持分开。而不是：

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

做的：

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

谷歌地图多边形在mouseout上消失

1 个答案: