谷歌地图导入geojson

时间:2015-11-18 00:53:42

标签: javascript api google-maps

我正在尝试制作带有标记的谷歌地图。应该是一件非常容易的事。但是,它一直向我抛出错误,说“无法读取未定义的属性'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);
}

1 个答案:

答案 0 :(得分:0)

The documentated方法是:

map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');

这适合我。

working fiddle

代码段

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>