如何解决使用geojson和javascript创建地图标记和热图不起作用
任何人都可以帮助解决此问题吗?我正在尝试创建一张地图,该地图显示美国发电厂的地图标记以及稍后的热图。我的代码存在的问题是,地图上线时甚至没有显示。我已附上配置文件,位置文件和索引文件,以帮助查找问题。我最初有一个本地csv文件,然后将其转换为geojson,然后将其部署在github上。
config.js
Set
location.js
// API key
const API_KEY = "pk.eyJ1IjoidGF1cmVhbmgiLCJhIjoiY2tmb21yc2tzMDFnYTJ0bXVuMzVub2tvYyJ9.vhUstehmvTj6HgfalepX8w";
index.html
var myMap = L.map("map",{
center: [37.7749,-122.4194],zoom: 13
});
// Adding tile layer
L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",{
attribution: "© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong>",tileSize: 512,maxZoom: 18,zoomOffset: -1,id: "mapbox/streets-v11",accessToken: API_KEY
}).addTo(myMap);
var url = "https://taureanh.github.io/geojson/";
d3.json(url,function(response) {
console.log(response);
for (var i = 0; i < response.length; i++) {
var geometry = response[i].geometry;
if (geometry) {
L.marker([geomtery.coordinates[1],geometry.coordinates[0]]).addTo(myMap);
}
}
});
解决方法
d3.json
需要JSON,但是您的端点正在返回HTML:
curl -I https://taureanh.github.io/geojson/
HTTP/2 200
server: GitHub.com
content-type: text/html; charset=utf-8
您应该更新端点,以便实际上返回JSON:content-type: application/json
;只是数据,没有<html>
标签。
或者,您可以更新location.js以获取端点(d3.request(url,function(html)
),然后自己将响应解析为JSON(剥离html标签,然后使用JSON.parse
)。这可以工作,但是很混乱而且不理想。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。