从链接加载传单地图
Load a leaflet map from a link
我正试图从链接加载传单地图。如果我单击第一个链接,地图将加载,然后如果我单击第二个链接,则不会加载地图。两个链接调用相同的函数。我不明白发生了什么。提前感谢!
<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
</head>
<body>
<a href="#" onclick="showMap('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')">OpenStreetMap</a><br>
<a href="#" onclick="showMap('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png')">Thunderforest</a><hr>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script>
<script>
function showMap(url){
var map = L.map('map').setView([-33.4387,-70.647], 14);
var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(url, {
attribution: 'Map data © ' + mapLink,
maxZoom: 18,
}).addTo(map);
}
</script>
</body>
</html>
您遇到了一个错误,因为您正在尝试初始化映射容器一秒钟。以下是解决此问题的方法:
<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
</head>
<body>
<a href="#" onclick="showMap('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')">OpenStreetMap</a><br>
<a href="#" onclick="showMap('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png')">Thunderforest</a><hr>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script>
<script>
var map;
function showMap(url){
if(!map)
{
map = L.map('map').setView([-33.4387,-70.647], 14);
}
var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(url, {
attribution: 'Map data © ' + mapLink,
maxZoom: 18,
}).addTo(map);
}
</script>
</body>
</html>
相关文章:
- “可绘制地图”设置地图选项“纬度-经度”
- React.js 和 Mapbox:使用 react.js 时地图框地图无法正确渲染
- 谷歌地图:从地图元素中获取纬度和经度
- Redraw自定义谷歌地图javascript地图
- 地图单击阻止文档单击
- 谷歌地图 Z 索引地图不显示
- 点击地图任务地图时获取纬度/液化天然气
- 是否可以在单个HTML页面中包含多个传单/地图框地图
- 谷歌地图v3:地图没有显示
- Mapbox.GL:滚动放大和缩小到自定义地图框地图上的特定坐标
- 获取宽度(以公里为单位)的谷歌地图 API 地图
- 谷歌地图API - 地图未显示 - 没有错误
- 谷歌地图 - 当地图应该显示时,有时会发生“未定义”错误或地图为空白.如何预防
- 必应地图显示地图的左上角的北美
- 谷歌地图api:地图不一致执行fitBounds
- 谷歌地图v3-地图没有'我不想从mysqldb加载标记
- Fusion Tables&带侧边栏的地图:非洲地图样本中从数字到加密的ID
- 如何使用gmaps4rails中的谷歌地图关闭地图POI数据
- 谷歌地图地理地图区域代码API
- 无法在地图单击侦听器事件上显示另一个地图