在Google地圖中按功能構建多個多邊形javascript

Question

我想在Google地圖中構建很多區域，並且每個區域都使用多邊形定義。 如果我這樣做，一個一個它的工作原理沒有問題（初始化FUNC內）：

name = new google.maps.Polygon({ 
      paths: coords, 
      strokeColor: 'darkgreen', 
      strokeOpacity: 0.3, 
      strokeWeight: 1, 
      fillOpacity: 0.05 
     }); 

//some event 
//highlights polygon when mouseover 
google.maps.event.addListener(name, 'mouseover', function() { 
name.setOptions({ fillColor: 'yellow', fillOpacity: 0.25 }); 
}); 

//then displaying it on the map: 
name.setMap(map); 

現在我想有一個功能，只是把在COORDS建立多邊形，這樣的事情。但是，僅僅調用函數停止從正在呈現其他的多邊形，所以我知道有稱這是一個問題：

iName = new drawPolygon(polyName, coords); 
iName.setMap(map); 

功能如下：

function drawPolygon(polyName, coords) { 
     polyName = new google.maps.Polygon({ 
      paths: coords, 
      strokeColor: 'darkgreen', 
      strokeOpacity: 0.3, 
      strokeWeight: 1, 
      //fillColor: 'green', 
      fillOpacity: 0.05 
     }); 


     //highlights polygon when mouseover 
     google.maps.event.addListener(polyName, 'mouseover', function() { 
      polyName.setOptions({ fillColor: 'yellow', fillOpacity: 0.25 }); 
     }); 
    } 

任何幫助，爲什麼，怎麼了我說錯了？

Answer 1

drawPolygon沒有返回語句。它返回null。 null沒有.setMap方法。

Answer 2

擴展geocodezip的答案，只需添加一個返回語句到你的函數。

function drawPolygon(polyName, coords) { 
     polyName = new google.maps.Polygon({ 
      paths: coords, 
      strokeColor: 'darkgreen', 
      strokeOpacity: 0.3, 
      strokeWeight: 1, 
      fillOpacity: 0.05 
     }); 


     //highlights polygon when mouseover 
     google.maps.event.addListener(polyName, 'mouseover', function() { 
      polyName.setOptions({ fillColor: 'yellow', fillOpacity: 0.25 }); 
     }); 

     return polyName; 
} 

我還傾向於在這種情況下，不打擾傳遞polyName到函數作爲參數。在調用drawPolygon之前，您不用麻煩向我們展示創建polyName變量的代碼。但是，我認爲你沒有做任何特別聰明的事情，需要你這樣做。

所以重構：

iName = new drawPolygon(coords); 
iName.setMap(map); 

function drawPolygon(coords) { 
     var polyName = new google.maps.Polygon({ 
      paths: coords, 
      strokeColor: 'darkgreen', 
      strokeOpacity: 0.3, 
      strokeWeight: 1, 
      fillOpacity: 0.05 
     }); 


     //highlights polygon when mouseover 
     google.maps.event.addListener(polyName, 'mouseover', function() { 
      polyName.setOptions({ fillColor: 'yellow', fillOpacity: 0.25 }); 
     }); 

     return polyName; 
}