问如何让简单按钮(插件)按钮显示在地图上？
EN

Stack Overflow用户

提问于 2020-12-30 06:34:31

回答 1查看 281关注 0票数 1

我是第一次接触Leaflet和JavaScript。我正在尝试创建一个web地图，将有3-4个按钮，当点击时，将缩放用户到给定的位置。例如:迪士尼世界(28.385384005128767，-81.56313371302178)，黑池游乐海滩(53.937909193096296，-3.0415772052368952)。到目前为止，我一直在尝试教程中的代码，但无法在我的地图上显示按钮。我做错了什么？

.full {
    padding: 0;
    margin: 0;
}

.full html, body, #map {
    height: 100%;
    width: 100vw;
}

.center {
  text-align: center;
} 

html, body, #map {
    height: 100%;
    width: 100vw;
}


#map{ width: 100%; height: 100%; }

iframe{
align-content: center;
width: 98%; height: 97%;
}

.leaflet-bar button,
.leaflet-bar button:hover {
  background-color: #fff;
  border: none;
  border-bottom: 1px solid #ccc;
  width: 26px;
  height: 26px;
  line-height: 26px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: black;
}

.leaflet-bar button {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;
}

.leaflet-bar button:hover {
  background-color: #f4f4f4;
}

.leaflet-bar button:first-of-type {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.leaflet-bar button:last-of-type {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: none;
}

.leaflet-bar.disabled,
.leaflet-bar button.disabled {
  cursor: default;
  pointer-events: none;
  opacity: .4;
}

.easy-button-button .button-state{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}


.leaflet-touch .leaflet-bar button {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<link rel="stylesheet" href="Leaflet.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">


</head>
<body id ="full" class= "full">

<div id = "text">
</div>
<div id="map"></div>

    <script>

 var map = L.map('map',{ center: [42.353770, -71.10360608], zoom: 16, keyboard: true});
    
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(map);

var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
}).addTo(map);    

var OSM = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(map);

var mapChoices = {
"Satellite": Esri_WorldImagery,
"OSM": OSM
}

    L.control.layers(mapChoices).addTo(map);
    
</script>

<script>

var map = L.map('map', {scrollWheelZoom: false}).setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(zoomTo);

L.easyButton( 'fa-gbp', function(){
  map.setView([55, -2], 4);
}).addTo(map);

L.easyButton( 'fa-jpy', function(){
map.setView([38, 139], 4);
}).addTo(map);

L.easyButton( 'fa-usd', function(){
 map.setView([37.8, -96], 3);
}).addTo(map);

</script>
</body>
</html>

leaflet

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-12-30 10:03:07

简单地说，不要重新实例化您的映射，也不要重新分配您的map变量。

你可以把你的两个<script>标签合并在一起，你会发现问题出在哪里。

你的第二个地图实例化应该会在你的浏览器Devtools控制台中抛出一个错误(如果你不使用它，请确保学习如何打开它)

在此之后，脚本的其余部分将被忽略。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65499671

复制

相似问题

问如何让简单按钮(插件)按钮显示在地图上？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让简单按钮(插件)按钮显示在地图上？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让简单按钮(插件)按钮显示在地图上？
EN