2017-12-18 4 views
-1

Googleマップでポリゴンが描画されていない理由を理解しようとしています。 私はそれをアレイに閉じ込めましたが、私が正直であることを間違っているのを見ることはできません。 Google API KEYを下のコードから削除して少し短くしました。ポリゴンが座標からマップ上に描画されていない(配列から)

ヒント/フィードバックはありますか?

<!DOCTYPE HTML> 
<html> 
<head> 
</head> 
<body> 
    <div id="map" style="width:100%;height:400px;"></div> 
</body> 
<script> 
    function initialize() 
    { 
     //fill array with coordinates 
     var path = [ 
      [51.14920179999362, 3.706512451171875], 
      [50.99042122689005, 3.475799560546875], 
      [50.93852713736125, 3.73809814453125], 
      [50.95929172950454, 4.003143310546875], 
      [51.108695514831865, 3.972930908203125] 
     ]; 

     //Options for the map 
     var mapOptions = { 
      zoom: 10, 
      center: new google.maps.LatLng(51.0108706, 3.7264613), 
     } 

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

     //options for the polygon 
     var polyOptions = { 
      paths: path, 
      strokeColor: '#FF0000', 
      strokeWeight: 2, 
      strokeOpacity: 0.8, 
      fillColor: '#FF0000', 
      fillOpacity: 0.35, 
      editable: false, //editeren van de polygon 
      draggable: false //verplaatsen van de polygon 
     }; 

     //create the polygon 
     var polygon = new google.maps.Polygon(polyOptions); 
     polygon.setMap(map);  
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

</html> 
+0

;'ちょうど後方にそれは '、'? –

+0

ブラウザのコンソールに、動作を説明するための出力がありますか? – tatmanblue

+0

インデックス0に「メッセージ : 」というインデックスがあります。インデックス0にあります:LatLngまたはLatLngLiteralではありません。オブジェクトではありません。 "(LatLngまたはLatLngLiteralオブジェクトではなく配列の配列を渡すため) – geocodezip

答えて

1

LatLngLiteralオブジェクト(またはLatLngオブジェクト)の配列に配列のあなたの配列を翻訳します。

var fixedPath = []; 
for (var i=0; i<path.length; i++) { 
    fixedPath.push({lat:path[i][0],lng:path[i][1]}); 
} 
//options for the polygon 
var polyOptions = { 
    paths: fixedPath, 

proof of concept fiddle

enter image description here

コードスニペット:あなたは `置き換える場合はどう

function initialize() { 
 
    //fill array with coordinates 
 
    var path = [ 
 
    [51.14920179999362, 3.706512451171875], 
 
    [50.99042122689005, 3.475799560546875], 
 
    [50.93852713736125, 3.73809814453125], 
 
    [50.95929172950454, 4.003143310546875], 
 
    [51.108695514831865, 3.972930908203125] 
 
    ]; 
 

 
    //Options for the map 
 
    var mapOptions = { 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(51.0108706, 3.7264613), 
 
    } 
 

 
    //generate map 
 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 
    var fixedPath = []; 
 
    for (var i = 0; i < path.length; i++) { 
 
    fixedPath.push({ 
 
     lat: path[i][0], 
 
     lng: path[i][1] 
 
    }); 
 
    } 
 
    //options for the polygon 
 
    var polyOptions = { 
 
    paths: fixedPath, 
 
    strokeColor: '#FF0000', 
 
    strokeWeight: 2, 
 
    strokeOpacity: 0.8, 
 
    fillColor: '#FF0000', 
 
    fillOpacity: 0.35, 
 
    editable: false, //editeren van de polygon 
 
    draggable: false //verplaatsen van de polygon 
 
    }; 
 

 
    //create the polygon 
 
    var polygon = new google.maps.Polygon(polyOptions); 
 
    polygon.setMap(map); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);
html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    a margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>

+0

私はあなたがそこで何をしたかを見ています...単に素晴らしい!助けてくれてありがとう!今私は続けることができます。 – TDB

関連する問題