顯示GeoJSON的谷歌地圖Javascript V3.21麻煩功能

更新顯示GeoJSON的谷歌地圖Javascript V3.21麻煩功能

任何人說看到這個，說等一下他用map.data.addGeoJson()而不是.loadGeoJson()這是因爲小提琴本地加載JSON時需要addGeoJson。如果在Web服務器上運行，loadGeoJSson()與上述代碼的工作方式相同。

下面

我跑這一切的web服務器上，以便根據Google地圖文檔來自同一個域加載GeoJSON的原來的問題是，只要接受URI是正確的（也可用於開發我」 m通過http運行geoJSON請求，不知道是否重要）。簡單地說，我將我的JSON對象放在與我的index.html和mapInit.js文件相同的目錄中。根據API文檔，我已經嘗試過的所有功能都可以在版本3.21的實際參考部分中找到，所以我假設它們仍然可以工作。我也有相應的API密鑰。

我的問題

爲什麼loadGeoJson不能正常工作，我會宣佈它不正確，還是我的造型是否有誤？

請告訴我工作

地圖載入就好了中心的正確位置，它然後加載自定義標記，並相應地圖中心。

請告訴我沒有工作

當加載使用customLayer.loadGeoJSON("some.json")的GeoJSON的文件我沒有錯誤，如果我切換到使用customLayer.addGeoJSON("some.json")我在控制檯中的無效要素或要素集合的錯誤。另外customLayer.setStyle({icon:image})似乎並沒有設置我也試過customLayer.StyleOptions({icon:image})的風格。

所以我堅持loadGeoJson()，因爲它似乎加載了JSON。

的index.html

!DOCTYPE html <html> <body> <div id="myMap" style='padding:0; height: 800px; width:100%;'></div> </body> <center> <script src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script> src="mapInit.js"</script> </html>

mapInit.js

function init(){ var mapCanvas = document.getElementById('myMap'); var map; var image = "../images/marker.svg"; var userCenter = new google.maps.LatLng(30.382288, -97.727447); var mapOptions = { draggable: true, zoomControl: true, scrollwheel: true, disableDoubleClickZoom: false, zoom: 8, center:userCenter }; map = new google.maps.Map(mapCanvas,mapOptions); var customLayer = new google.maps.Data(); customLayer.loadGeoJson("some.json"); customLayer.setStyle({ title: '#', icon:image, map: map, }); customLayer.forEach(function(feature) { var point = new google.maps.LatLng(feature.getProperty('coordinates')) var mark = new google.maps.Marker({ position: point, title: '#', icon:image, map: map, draggable: false, animation: google.maps.Animation.DROP }); }); // customLayer.setMap(map); var marker = new google.maps.Marker({ position: userCenter, title: 'Your Location', icon:image, map: map, draggable: true, animation: google.maps.Animation.DROP }); }

我也嘗試添加customLayer.setMap(map);而不是在setStyle()沒有運氣宣佈map:map。

的some.json文件下方，在正確的目錄爲Chrome和Firefox遊戲機正在註冊200 OK

some.json

{ "type": "FeatureCollection", "features":[ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [30.388256,-97.739863]}, "properties": {"prop0": "value0"} }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [30.389904,-97.739226]}, "properties": {"prop1": "value1"} }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [30.384617,-97.739348]}, "properties": {"prop2": "value2"} }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [30.387876,-97.7396]}, "properties": {"prop3": "value3"} } ] }

來源

2015-10-01 Ravenous

你的座標是向後你GeoJSON的。 GeoJSON是[經度，緯度]，90 +度是無效的緯度。如果您將GeoJSON粘貼到geojsonlint.com，您會在南極看到所有標記。

的GeoJSON的應該是：

{ 
    "type": "FeatureCollection", 
    "features":[ 
     { "type": "Feature", 
     "geometry": {"type": "Point", "coordinates": [-97.739863,30.388256]}, 
     "properties": {"prop0": "value0"} 
     }, 
     { "type": "Feature", 
     "geometry": {"type": "Point", "coordinates": [-97.739226,30.389904]}, 
     "properties": {"prop1": "value1"} 
     }, 
     { "type": "Feature", 
     "geometry": {"type": "Point", "coordinates": [-97.739348,30.384617]}, 
     "properties": {"prop2": "value2"} 
     }, 
     { "type": "Feature", 
     "geometry": {"type": "Point", "coordinates": [-97.7396,30.387876]}, 
     "properties": {"prop3": "value3"} 
     } 
    ] 
};

proof of concept fiddle

代碼片段：

function init() { 
 
    var mapCanvas = document.getElementById('myMap'); 
 
    var map; 
 
    var image = "http://maps.google.com/mapfiles/ms/micons/blue.png"; 
 

 
    var userCenter = new google.maps.LatLng(30.382288, -97.727447); 
 
    var mapOptions = { 
 
    draggable: true, 
 
    zoomControl: true, 
 
    scrollwheel: true, 
 
    disableDoubleClickZoom: false, 
 
    zoom: 13, 
 
    center: userCenter 
 
    }; 
 

 
    map = new google.maps.Map(mapCanvas, mapOptions); 
 

 
    var customLayer = new google.maps.Data(); 
 

 
    map.data.addGeoJson(jsonData); 
 
    map.data.setStyle({ 
 
    title: '#', 
 
    icon: image, 
 
    map: map, 
 
    }); 
 

 
    map.data.forEach(function(feature) { 
 
    var point = new google.maps.LatLng(feature.getProperty('coordinates')) 
 
    var mark = new google.maps.Marker({ 
 
     position: point, 
 
     title: '#', 
 
     icon: image, 
 
     map: map, 
 
     draggable: false, 
 
     animation: google.maps.Animation.DROP 
 
    }); 
 
    }); 
 
    // customLayer.setMap(map); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: userCenter, 
 
    title: 'Your Location', 
 
    icon: image, 
 
    map: map, 
 
    draggable: true, 
 
    animation: google.maps.Animation.DROP 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', init); 
 
var jsonData = { 
 
    "type": "FeatureCollection", 
 
    "features": [{ 
 
    "type": "Feature", 
 
    "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [-97.739863, 30.388256] 
 
    }, 
 
    "properties": { 
 
     "prop0": "value0" 
 
    } 
 
    }, { 
 
    "type": "Feature", 
 
    "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [-97.739226, 30.389904] 
 
    }, 
 
    "properties": { 
 
     "prop1": "value1" 
 
    } 
 
    }, { 
 
    "type": "Feature", 
 
    "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [-97.739348, 30.384617] 
 
    }, 
 
    "properties": { 
 
     "prop2": "value2" 
 
    } 
 
    }, { 
 
    "type": "Feature", 
 
    "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [-97.7396, 30.387876] 
 
    }, 
 
    "properties": { 
 
     "prop3": "value3" 
 
    } 
 
    }] 
 
};

html, 
 
body, 
 
#myMap { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="myMap" style='padding:0;'></div>

來源

2015-10-01 18:22:46 geocodezip

示例代碼有一個嚴重的錯誤。「座標」不是特徵的屬性。所以在循環中創建的標記不會被渲染。演示中看到的藍色圖標在調用'setStyle'時設置。爲了影響單個標記，該循環應調用'feature.getGeometry（）。forEachLatLng（...）'和'setStyle'應該具有'visible：false'標誌。 – Twifty

顯示GeoJSON的谷歌地圖Javascript V3.21麻煩功能

回答

相關問題