javascript - 在地图上绘制多边形时地图不显示
问题描述
我正在努力显示距给定点最近的标记。在我的示例中,我的起点是用户位置,从这一点开始,我需要在数组列表中找到最近的标记。我找到了一个教程并开始研究它。但是当我尝试向其中添加地图时,地图没有显示,当我尝试放大或缩小时,标记也消失了。
这是我今天尝试过的代码。任何人都可以帮助我这段代码有什么问题。
var userLocation = new L.LatLng(13.7563, 100.5018);
var map = L.map('map').setView(userLocation, 6);
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
maxZoom: 17,
minZoom: 9
}).addTo(map);
var greenIcon = L.icon({
iconUrl: 'icon/icon.png',
iconSize: [64, 64]
});
//random locations around the world
var items = [{
//china
lat: "7.9519",
lon: "98.3381"
}, {
//colombia
lat: "19.9105",
lon: "99.8406"
}, {
//libya
lat: "14.9930",
lon: "103.1029"
}];
drawData();
//draw all the data on the map
function drawData() {
var item, o;
//draw markers for all items
for (item in items) {
o = items[item];
var loc = new L.LatLng(o.lat, o.lon);
createPolyLine(loc, userLocation);
}
}
//draw polyline
function createPolyLine(loc1, loc2) {
var latlongs = [loc1, loc2];
var polyline = new L.Polyline(latlongs, {
color: 'green',
opacity: 1,
weight: 1,
clickable: false
}).addTo(map);
//distance
var s = 'About ' + (loc1.distanceTo(loc2) / 1000).toFixed(0) + 'km away from you.</p>';
var marker = L.marker(loc1).addTo(map);
if (marker) {
marker.bindPopup(s);
}
}
解决方案
这些图块仅限于马萨诸塞州联邦,因此您在随机位置的点不会出现。将积分更改为英联邦内部可以解决此问题:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
</head>
<body>
<div id="map" style="width: 1366px; height: 720px;"></div>
<script>
var userLocation = new L.LatLng(42.237, -71.96);
var map = L.map('map').setView(userLocation, 6);
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
maxZoom: 17,
minZoom: 9
}).addTo(map);
var greenIcon = L.icon({
iconUrl: 'icon/icon.png',
iconSize: [64, 64]
});
//random locations around the Commonwealth
var items = [{
//Georgetown
lat: "42.703",
lon: "-70.98"
}, {
//Mattapoisett
lat: "41.6577",
lon: "-70.807"
}, {
//Otis
lat: "42.1915",
lon: "-73.08"
}];
drawData();
//draw all the data on the map
function drawData() {
var item, o;
//draw markers for all items
for (item in items) {
o = items[item];
var loc = new L.LatLng(o.lat, o.lon);
createPolyLine(loc, userLocation);
}
}
//draw polyline
function createPolyLine(loc1, loc2) {
var latlongs = [loc1, loc2];
var polyline = new L.Polyline(latlongs, {
color: 'green',
opacity: 1,
weight: 1,
clickable: false
}).addTo(map);
//distance
var s = 'About ' + (loc1.distanceTo(loc2) / 1000).toFixed(0) + 'km away from you.</p>';
var marker = L.marker(loc1).addTo(map);
if (marker) {
marker.bindPopup(s);
}
}
</script>
</html>
产生所需的输出:
推荐阅读
- c# - 尝试序列化 JSON 数组时获取异常 Newtonsoft.Json.JsonSerializationException
- ruby-on-rails - 来自嵌套模块的 Rspec“NoMethodError”
- python - 计算数据框中与另一个实例匹配的实例
- blockchain - 尝试使用 SunPKCS11 提供程序将 Corda R3 区块链与 Utimaco HSM 集成
- navigation - 导航搜索栏
- typescript - 将类型的字段列表映射到数组类型
- ios - 如何在 Swift 中使用 place_id 从 Google Places API 请求地点详细信息?
- java - 为什么要使用 awt.Dimension 类?
- python - 使用轨道 URI 从 Spotify 中提取音频特征
- python - Mac OS:Catalina:无法执行“gcc”:没有这样的文件或目录