0

Google Maps v3 API を使用して、同じ名前でポリゴンを分割する方法はありますか

たとえば、XXX X レベルまでの英国の郵便番号用に調整された束があります。

CR0 1 と CR0 2 があるとします。CR0 という名前の 1 つのポリゴンが必要ですが、マップ上で分割されます。

これは私が持っていたものです

var triangleCoords = [
new google.maps.LatLng(51.3552780000, -0.1162350000),
new google.maps.LatLng(51.3557810000, -0.1179340000),
new google.maps.LatLng(51.3572930000, -0.1171320000),
new google.maps.LatLng(51.3573480000, -0.1155220000),
new google.maps.LatLng(51.3573380000, -0.1154850000),
new google.maps.LatLng(51.3572730000, -0.1153750000),
new google.maps.LatLng(51.3557800000, -0.1149820000),
new google.maps.LatLng(51.3552780000, -0.1162350000)
];

と

var triangleCoords = [
new google.maps.LatLng(51.3749120000,-0.0897770000),
new google.maps.LatLng(51.3747190000, -0.0888120000), 
new google.maps.LatLng(51.3746020000, -0.0887410000), 
new google.maps.LatLng(51.3742810000, -0.0890390000), 
new google.maps.LatLng(51.3742740000, -0.0903670000), 
new google.maps.LatLng(51.3746260000, -0.0904120000), 
new google.maps.LatLng(51.3749120000, -0.0897770000) ];

座標を 1 つのパスに入れてみましたが、それらの間に奇妙な線が表示されます

var triangleCoords = [ 
new google.maps.LatLng(51.3552780000, -0.1162350000), 
new google.maps.LatLng(51.3557810000, -0.1179340000), 
new google.maps.LatLng(51.3572930000, -0.1171320000), 
new google.maps.LatLng(51.3573480000, -0.1155220000), 
new google.maps.LatLng(51.3573380000, -0.1154850000), 
new google.maps.LatLng(51.3572730000, -0.1153750000), 
new google.maps.LatLng(51.3557800000, -0.1149820000), 
new google.maps.LatLng(51.3552780000, -0.1162350000), 
new google.maps.LatLng(51.3749120000, -0.0897770000), 
new google.maps.LatLng(51.3747190000, -0.0888120000), 
new google.maps.LatLng(51.3746020000, -0.0887410000), 
new google.maps.LatLng(51.3742810000, -0.0890390000), 
new google.maps.LatLng(51.3742740000, -0.0903670000), 
new google.maps.LatLng(51.3746260000, -0.0904120000), 
new google.maps.LatLng(51.3749120000, -0.0897770000) ]

  CR0_3 = new google.maps.Polygon({
      paths: triangleCoords,
      strokeColor: '#545fa4',
      strokeOpacity: 0.8,
      strokeWeight: 0.7,
      fillColor: '#545fa4',
      fillOpacity: 0.7
    });

これは、マルチ ジオメトリを使用して KML で実現できますが、Google マップ API を使用してそれを行う方法がわかりませんでした。

この要求は理にかなっていますか?

4

1 に答える 1

2

CR0 の 2 つの部分は連続していないため、別々のパスにする必要があります (ポリゴンにはパスの配列があり、それらを別々にすると連続線で描画されません)。

 var triangleCoords1 = [
 new google.maps.LatLng(51.3552780000, -0.1162350000),
 new google.maps.LatLng(51.3557810000, -0.1179340000),
 new google.maps.LatLng(51.3572930000, -0.1171320000),
 new google.maps.LatLng(51.3573480000, -0.1155220000),
 new google.maps.LatLng(51.3573380000, -0.1154850000),
 new google.maps.LatLng(51.3572730000, -0.1153750000),
 new google.maps.LatLng(51.3557800000, -0.1149820000),
 new google.maps.LatLng(51.3552780000, -0.1162350000)
 ];


 var triangleCoords2 = [
 new google.maps.LatLng(51.3749120000,-0.0897770000),
 new google.maps.LatLng(51.3747190000, -0.0888120000), 
 new google.maps.LatLng(51.3746020000, -0.0887410000), 
 new google.maps.LatLng(51.3742810000, -0.0890390000), 
 new google.maps.LatLng(51.3742740000, -0.0903670000), 
 new google.maps.LatLng(51.3746260000, -0.0904120000), 
 new google.maps.LatLng(51.3749120000, -0.0897770000) ];

 var CR0_3 = new google.maps.Polygon({
    map: map,
    paths: [triangleCoords1, triangleCoords2], 
    strokeColor: '#545fa4',
    strokeOpacity: 0.8,
    strokeWeight: 0.7,
    fillColor: '#545fa4',
    fillOpacity: 0.7
  });

実施例

于 2012-11-07T17:52:34.490 に答える