leaflet 集成百度地图小例子(1)

最新推荐文章于 2025-02-24 10:57:08 发布

七月的渡口

最新推荐文章于 2025-02-24 10:57:08 发布

阅读量4.1k

点赞数

本文链接：https://blog.youkuaiyun.com/sgy86/article/details/78614634

版权

本文介绍了如何使用Leaflet库集成百度地图，展示了一个简单的地图实例，并探讨了初始化地图、设置视图及添加图层等基本操作。适合初学者了解Leaflet与地图集成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.首先你要实现一个地图的小例子以便于理解leaflet如何实现的

1.leaflet CSS文件标题部分的文档:

1	`<link rel=` `"stylesheet"` `href=` `"https://unpkg.com/leaflet@1.0.1/dist/leaflet.css"` `/>`

2.传单JavaScript文件:

1	`<script src=` `"https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"` `></script>`

3.放一个div元素与特定的id,你想要你的地图:

1	`<div id=` `"mapid"` `></div>`

4.确保定义的映射容器有一个高度,例如通过设置CSS（必须定义一个高度，因为无法获取指定的id名，因此这个库并没有进行高度的处理设置，自己必须设置高度，如同div默认是没有高度的一样）:

 
                  #mapid { height: -webkit-fill-available; 
                  }

现在您已经准备好初始化地图,用它做一些东西。

让我们创建一个地图的中心沈阳某个地点漂亮Mapbox街道瓷砖。首先我们将初始化和设置它的视图映射到我们选择的地理坐标和缩放级别（里面的 mapid 必须和设置的id保持一致）:

 
                   var  
                   mymap = L.map( 
                   'mapid' 
                   ).setView([41.80408, 123.44238], 14);

在默认情况下(我们没有通过任何选项创建地图实例)时,所有鼠标和触摸交互启用了在地图上,它有放大和归因控制。（这些都可以通过js来控制，目前只是入门，有深入了解的可以自己摸索）

注意setView调用返回地图对象——大多数leaflet方法这样的行为时不返回一个显式的值,它允许方便类jQuery方法控制。

接下来,我们将添加一个砖层来增加我们的地图,在这种情况下这是一个Mapbox街道砖层。创建一个砖层通常涉及瓷砖图像的模板设置URL(在Mapbox得到你),归因的文本和的最大缩放级别层:

 
                   L.tileLayer( 
                   'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}' 
                   , { 
                  
                   attribution:  
                   'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>' 
                   , 
                  
                   maxZoom: 18, 
                  
                   id:  
                   'your.mapbox.project.id' 
                   , 
                  
                   accessToken:  
                   'your.mapbox.public.access.token' 
                  
                   }).addTo(mymap);