将 GeoJSON 数据添加到本地托管的 Google Maps API
[英]Adding GeoJSON Data to Google Maps API Hosted Locally
问题描述
I'm trying to get my geojson data onto a google map.
我正在尝试将我的 geojson 数据放到谷歌地图上。 I've been trying various methods within the documentation to get my points to load: https://developers.google.com/maps/documentation/javascript/reference/data#Data.toGeoJson with no success so far.我一直在文档中尝试各种方法来加载我的点： https : //developers.google.com/maps/documentation/javascript/reference/data#Data.toGeoJson到目前为止没有成功。 Basically the map is loading fine, but the points aren't loading at all, so I must be doing something wrong with the importing of the points.基本上地图加载良好，但点根本没有加载，所以我必须在导入点时做错了什么。 Especially because when I add points using their drag and drop interface, it seems to load fine.特别是因为当我使用他们的拖放界面添加点时，它似乎加载良好。
The mapping code:映射代码：
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Makes the sample page fill the window*/
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
background-color: #fff;
border: 1px solid #999;
left: 25%;
padding: 5px;
position: absolute;
top: 10px;
z-index: 5;
}
</style>
</head>
<body>
<div id="floating-panel">
<button onclick="toggleHeatmap()">Toggle Heatmap</button>
<button onclick="changeGradient()">Change gradient</button>
<button onclick="changeRadius()">Change radius</button>
<button onclick="changeOpacity()">Change opacity</button>
</div>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.742043, lng: -104.991531},
zoom: 10
});
}
var dataPoints = new google.maps.toGeoJson('map.json');
google.maps.addGeoJson(dataPoints);
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY_GOES_HERE&callback=initMap"
async defer></script>
</body>
</html>
Then the geoJSON data:然后是geoJSON数据：
https://api.myjson.com/bins/k45by https://api.myjson.com/bins/k45by
It's in a link to save space, but I will use that GeoJSON data in a local file and run it on a local web server using python's http.server.它位于一个链接中以节省空间，但我将在本地文件中使用该 GeoJSON 数据，并使用 python 的 http.server 在本地 Web 服务器上运行它。
1 个解决方案
解决方案1
0 已采纳 2020-02-04 02:27:39
Use the loadGeoJson method to get data from a domain or local file.使用loadGeoJson方法从域或本地文件中获取数据。 It will use a XMLHTTPRequest to fetch your data and do all the steps to get your data ready for usage.它将使用 XMLHTTPRequest 来获取您的数据并执行所有步骤以使您的数据准备好使用。
Every map has a map.data object, which acts as a data layer for arbitrary geospatial data, including GeoJSON.
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.742043, lng: -104.991531},
zoom: 10
});
map.data.loadGeoJson('https://api.myjson.com/bins/k45by');
}
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.