鼠標懸停時Google Map多邊形消失

Question

我正在使用API v3在Google Map上繪制多邊形，並將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);

鼠標懸停時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