Google Maps API data.setStyle在地圖上不顯示圖標

我正嘗試使用Google Maps JS API創建一個小應用程序。我正在使用數據層從GeoJSON文件加載一堆點。該文件似乎正在加載，並且地圖正在顯示，但在map.data.setstyle（）中設置的圖標不會顯示...Google Maps API data.setStyle在地圖上不顯示圖標

下面是我的HTML，CSS和JS。我一直在看這個爲期2天，我無法弄清楚發生了什麼問題。先謝謝你！

HTML

<body> 
    <div id="map-canvas"></div> 
</body>

CSS

html { 
    height: 100% 
} 

body { 
    height: 100%; 
    margin: 0; 
    padding: 0 
} 

#map-canvas { 
    height: 100% 
}

$(document).ready(function() { 
    var map; 

    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(37.000, -120.000), 
     zoom: 7 
    }; 

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

    map.data.loadGeoJson('/map.json'); 
    map.data.setStyle(function(feature) { 
     var theaterName = feature.getProperty('name'); 
     return { 
     icon: "https://maps.gstatic.com/mapfiles/ms2/micons/marina.png", 
     visible: true, 
     clickable: true, 
     title: theaterName 
     }; 
    }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

});

JSON

{ 
    "type": "FeatureCollection", 
    "features": [ 
    { 
    "type": "Feature", 
    "properties": { 
    "rentrak_id": "9183", "name": "Palm Theatre", "address": "817 Palm St, San Luis Obispo, CA"}, 
    "geometry": { 
    "type": "Point", 
    "coordinates": [35.2815558, -120.6638196] 
    } 
}, 
{ 
"type": "Feature", 
"properties": { 
    "rentrak_id": "8961", "name": "King City 3", "address": "200 Broadway St, King City, CA"}, 
"geometry": { 
    "type": "Point", 
    "coordinates": [36.21372, -121.1261771] 
} 
}, 
{"type": "Feature", "properties": { 
"rentrak_id": "5549", "name": "Van Buren 3 DI", "address": "3035 Van Buren Blvd, Riverside, CA"}, 
"geometry": { 
"type": "Point", 
"coordinates": [33.9113137, -117.4364228] 
}}, 
{"type": "Feature", "properties": { 
"rentrak_id": "990802", "name": "CGV Cinemas LA", "address": "621 S Western Ave, Los Angeles, CA"}, 
"geometry": { 
"type": "Point", 
"coordinates": [34.0626656, -118.3093961] 
}}, 
{"type": "Feature", "properties": { 
"rentrak_id": "5521", "name": "Rancho Niguel 7", "address": "25471 Rancho Niguel Rd, Laguna Niguel, CA"}, 
"geometry": { 
"type": "Point", 
"coordinates": [33.5560509, -117.68533] 
}}]}

編輯::

所以，我的劇本是工作，當我使用這個文件：http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week

這讓我覺得有什麼不對我的本地JSON文件......但是當我通過JavaScript的步驟，我可以查看每個功能並檢查屬性和幾何，並且它們似乎已正確加載到google.maps.feature對象中。所以，我仍然不知道爲什麼這些觀點不會出現。

來源

2014-03-31 chez.mosey

你的腳本，因爲它是按預期工作對我來說，請創建演示或交'map.json' –

隨着你的腳本和你的JSON文件中的每個功能都有正確的緯度，它被設置爲-90錯誤的經度。至少這是我在console.log中看到的 –

Blahh !!謝謝！是的，經度和緯度的順序是錯誤的，所以沒有任何顯示。 –

該座標需要經緯度，然後緯度在geojson順序...太棒了！猜猜這是徹底閱讀文檔的好教訓。

來源

2014-04-01 16:57:04

令人難以置信！點座標是所有其他用例的倒退！ – Spidey

我相信你正在定義標記，但沒有設置與他們的地圖。

嘗試： theaterName.setMap（map）;

設置地圖上的標記。

來源

2014-04-01 01:13:13 avalente1

其實，我沒有使用標記。我試圖使用新的谷歌地圖數據層一次性使用.loadGeoJson加載一堆地理空間數據。 theaterName只是一個字符串，而不是標記，所以我不認爲這是問題。 –

您正在使用布爾值作爲字符串：'true'而不是true。於是打電話給setStyle應該是：

map.data.setStyle(function(feature) { 
    var theaterName = feature.getProperty('name'); 
    return { 
    icon: "https://maps.gstatic.com/mapfiles/ms2/micons/marina.png", 
    visible: true, 
    clickable: true, 
    title: theaterName 
    }; 
});

更新：您的JSON文件交換緯度/經度座標。應該有

"coordinates": [-118.3093961, 34.0626656]

，而不是

"coordinates": [34.0626656, -118.3093961]

那是我這有值xy, -90對象的原因。

參見GeoJSON specs：元素的順序必須遵循的x，y和z的順序（東向，北向，高度爲在座標的投影座標參考系，或經度，緯度，高度爲座標在地理座標參考系統）。

因此，Google Maps API使用lat/lng，對於GeoJSON文件座標應該是lng/lat。

來源

2014-04-01 07:35:34

這當然是正確的，但不會破壞腳本。 API顯然沒有檢查布爾值的類型，字符串「true」將被評估爲布爾值「true」，所以它只會給出不希望的結果，字符串爲「false」（這也是被評估爲布爾「真」） –

我試着改變字符串，但不幸的是沒有解決問題。我要發佈我的json文件。 –

Google Maps API data.setStyle在地圖上不顯示圖標

回答

相關問題