前端对 “百度地图“ 的应用入门

最新推荐文章于 2024-08-25 23:50:34 发布

Lin_25937

最新推荐文章于 2024-08-25 23:50:34 发布

阅读量1.2k

点赞数

文章标签：前端百度 javascript

本文链接：https://blog.csdn.net/Lin_25937/article/details/127620889

版权

本文介绍了如何在前端Vue项目中集成并使用百度地图。内容包括实名注册获取API密钥，引入地图JS，创建地图容器，展示地图及添加控件，绘制线，添加标签和信息窗口。此外，还提供了在Vue项目中引入百度地图的具体步骤，包括在index.js中引入JS文件和在mounted生命周期钩子中初始化地图。建议开发者参考百度地图开发文档深入学习。

摘要由CSDN通过智能技术生成

解释：LBS：LocationBusinessServer 基于定义位置的商业服务（国内的位置服务主要是：百度和高德）

1 .使用步骤

1.首先登录百度地图并实名注册在控制台>我的应用中创建应用，获取密钥Ak
2.在项目中引入百度地图js<script src ="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你自己的AK>
3.创建地图容器

>/div>
4初始化地图：var map = new BMap.Map(“container”)
5.创建一个地图中心点var point new BMap.Point(经度，纬度)
6.设置中心点和滚轮缩放：map.centerAndZoom(point, 15); 鼠标滚轮缩放：map.enableScrollWheelZoom(true); 在这里插入图片描述

2.案例应用

1.地图的显示（添加控件，在api文档中：百度地图开发文档->添加控件）

//添加一个点
var marker =new BMapGL.Marker(point);
//添加覆盖物
map.addOverlay(marker);
//监听事件
map.addEventListener("click",e=>{
   
//创建点
var p =new BMapGL.Point(e.latlng.lng,e.latlng.lat)
//创建标记
var m =new BMapGL.Marker(p);
//添加标记
map.addOverlay(m);
console.log(e)
    })