我正在尝试制作一个带有标记的谷歌地图。这应该是一项非常容易的任务。然而,它不断向我抛出错误,说"无法读取未定义的属性‘addGeoJson’"或"无法读取尚未定义的属性’loadGeoJson"。有人能帮我弄清楚为什么?非常感谢!
我尝试了许多不同的方法来导入数据。(该数据是一个到geojson文件的链接。geojson文件经过验证。下面使用map.json作为占位符):
var add_data = $.getJSON("map.json");
add_data.then(function(data){
cachedGeoJson = data;
console.log(cachedGeoJson);
map.data.addGeoJson(cachedGeoJson,{idPropertyName:"id"});
});
or:
map.data.loadGeoJson('map.json');
or:
var script = document.createElement('script');
script.src = 'map.json';
document.getElementsByTagName('head')[0].appendChild(script);
function eqfeed_callback(results) {
map.data.addGeoJson(results);
}
文档化的方法是:
map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
这对我有用。
工作小提琴
代码片段:
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -28,
lng: 137
}
});
// NOTE: This uses cross-domain XHR, and may not work on older browsers.
map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>