谷歌地图导入geojson

Google map import geojson

本文关键字：geojson 导入 谷歌地图      更新时间：2023-09-26

我正在尝试制作一个带有标记的谷歌地图。这应该是一项非常容易的任务。然而，它不断向我抛出错误，说"无法读取未定义的属性‘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>

相关文章：