使用gmaps.js从geoJSON文件中放置标记
使用gmaps.js从geoJSON文件中放置标记
提问于 2019-08-08 03:29:00
我需要使用gmaps.js从.json文件中获取标记信息，并在本地html页面上显示标记位置。
我使用标准Google平台API成功地做到了这一点，使用了下面给出的示例：数据
我的geojson文件的格式与上面示例中的相同。但是，由于gmaps.js的简单性和易用性，我想使用它。如何在gmaps.js中对上述代码进行调整和使用？
到目前为止，这是我非常基本的代码：
var mapObj = new GMaps({
el: '#map',
lat: 30.267283,
lng: -90.554560,
zoom: 2,
minZoom: 2
})
/*attempting to place markers from geojson file*/
/*managed to add markers manually*/
mapObj.addMarker({
lat: 30.267283,
lng: -90.554560,
title: 'Marker with InfoWindow',
infoWindow: {
content: '<p>HI!</p>'
},
click: function(e) {
mapObj.map.panTo(e.position);
}
});我尝试使用：https://hpneo.dev/gmaps/examples/json.html
然而，我的网页似乎导致了一个空白的白色屏幕。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-08-10 09:23:27
使用JSON上的gmaps示例运行良好；您只需要根据自己的JSON文件修改它。如果它看起来像来自Google文档的那个，那么您可以像gmaps.js一样直接用getJSON加载它。
查看这个jsbin以获得演示和指导。下面是完整代码。希望能帮上忙！
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key="></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.js"></script>
<script>
var map;
function loadResults(data) {
var markers_data = [];
for (var i = 0; i < data.features.length; i++) {
var coords = data.features[i].geometry.coordinates;
markers_data.push({
lat: coords[1],
lng: coords[0],
infoWindow: {
content: '<p>HI!</p>'
},
click: function(e) {
map.map.panTo(e.position);
}
});
}
map.addMarkers(markers_data);
}
$(document).on('click', '.pan-to-marker', function(e) {
e.preventDefault();
var position, lat, lng, $index;
$index = $(this).data('marker-index');
position = map.markers[$index].getPosition();
lat = position.lat();
lng = position.lng();
map.setCenter(lat, lng);
});
$(document).ready(function() {
map = new GMaps({
el: '#map',
lat: 30.267283,
lng: -90.554560,
zoom: 2,
minZoom: 2
});
map.on('marker_added', function(marker) {
var index = map.markers.indexOf(marker);
if (index == map.markers.length - 1) {
map.fitZoom();
}
});
var xhr = $.getJSON('https://api.myjson.com/bins/11fqjv');
xhr.done(loadResults);
});
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57404798
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号