2013-10-28 87 views
-1

我正在創建一個使用apiv3谷歌地圖的可視化。目前,我在地圖上繪製了幾千個多邊形,還繪製了一些標記。問題是我試圖畫出的一些區域被認爲是「多面體」。例如,投票區域具有多個區域,這些區域是分開的而不是以單個多邊形連接的。我如何畫這個?谷歌地圖apiv3 multipolygon

試過這個,但它似乎沒有渲染。

var Poly14591; 
var outer = new google.maps.MVCArray([new google.maps.LatLng(42.862496, -78.151154), new google.maps.LatLng(42.862251, -78.151319), new google.maps.LatLng(42.86189, -78.151538), new google.maps.LatLng(42.861765, -78.151647)]); 


var inner = new google.maps.MVCArray([new google.maps.LatLng(42.867545, -78.151817), new google.maps.LatLng(42.866978, -78.151813), new google.maps.LatLng(42.866044, -78.151787), new google.maps.LatLng(42.864956, -78.151712), new google.maps.LatLng(42.864231, -78.151709), new google.maps.LatLng(42.863593, -78.151708)]); 

var paths = new google.maps.MVCArray([outer, inner]); 

Poly14591 = new google.maps.Polygon({paths:paths, strokeOpacity: 10.0, strokeWeight: 20, strokeColor: "#FF0000", fillColor: "#FF0000", fillOpacity: 0.35}); 

Poly14591.setMap(map); 
+0

[google.maps.Polygon](https://developers.google.com/maps/documentation/javascript/reference#Polygon)對象需要一組路徑。 – geocodezip

+0

所以它看起來像我需要使用MVCArray?有沒有樣品? – user2524908

+1

您不必使用MVCArrays,它是一個正常的google.maps.LatLng對象數組的數組。我在http://www.geocodezip.com上有示例,但大多數示例都涉及不分隔區域的洞,但概念是相同的。 – geocodezip

回答

0

這實際上似乎允許我映射單獨的多邊形,這些多邊形實際上仍然在單個Google地圖多邊形對象的上下文中。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Simple Polygon</title> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 
// This example creates a simple polygon representing the Bermuda Triangle. 

function initialize() { 
    var mapOptions = { 
    zoom: 5, 
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875), 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

    var bermudaTriangle; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

var Poly14591; 


    var paths = [[new google.maps.LatLng(42.862496, -78.151154), new google.maps.LatLng(42.862251, -78.151319), new google.maps.LatLng(42.86189, -78.151538), new google.maps.LatLng(42.861765, -78.151647)], [new google.maps.LatLng(42.867545, -78.151817), new google.maps.LatLng(42.866978, -78.151813), new google.maps.LatLng(42.866044, -78.151787), new google.maps.LatLng(42.864956, -78.151712), new google.maps.LatLng(42.864231, -78.151709), new google.maps.LatLng(42.863593, -78.151708)]]; 


Poly14591 = new google.maps.Polygon({paths:paths, strokeOpacity: 10.0, strokeWeight: 20, strokeColor: "#FF0000", fillColor: "#FF0000", fillOpacity: 0.35}); 

Poly14591.setMap(map); 

} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>