Google地圖多邊形在鼠標移除時消失了

我正在使用API v3在Google地圖上繪製多邊形，並將mouseover和mouseout事件附加到這些多邊形。基本上，它是一個區域上具有多邊形的45個區域的地圖。Google地圖多邊形在鼠標移除時消失了

我在地圖上繪製了兩個多邊形，但是第一個多邊形的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>

我使用座標數組並循環每一個座標，因爲它們將從數據庫中檢索。

來源

2014-02-26 Sithu

您正在將路徑存儲在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);

來源

2014-02-26 14:03:40 geocodezip

太棒了！有用。謝謝。 – Sithu

我不知道函數'setPath（）' – Sithu

請參閱[google.maps.Polygon的文檔]（https://developers.google.com/maps/documentation/javascript/reference#Polygon） – geocodezip

Google地圖多邊形在鼠標移除時消失了

回答

相關問題