宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

百度地图

解释

LBS: LocationBusinessServer 基于定义位置的商业服务

使用步骤

01登录注册，获取秘钥AK
02引入百度地图js<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你自己的AK"></script>
03创建地图的容器<div id="container"></div>
04初始化地图var map = new BMap.Map"container")  （初始化地图）
05创建一个地图中心点var point new BMap.point经度,维度)
06设置中心点和滚轮缩放map.centerAndZoompoint,15);//鼠标滚轮缩放map.enableScrollWheelZoomtrue);

地图上绘制内容

点

//创建点
var p = new BMapGL.Pointe.latlng.lng, e.latlng.lat);
//创建标记
var m = new BMapGL.Markerp);

效果图如下
百度地图的基础应用-风君子博客

线

// var polyline = new BMapGL.Polylineline, {
// 	strokeStyle: "dashed",
// 	strokeColor: "blue",
// 	strokeOpacity: 0.5
// });//添加线
// map.addOverlaypolyline);

效果图如下
百度地图的基础应用-风君子博客

面

 var polygone = new BMapGL.Polygonline, {fillColor: "red",strokeColor: "blue",strokeWeight: 2,strokeOpacity: 0.5
});//添加面
map.addOverlaypolygone);

效果图如下
百度地图的基础应用-风君子博客

圆形

//绘制圆圈var circle = new BMapGL.Circlepoint, 2000, {strokeColor: "green"});
//添加圆圈map.addOverlaycircle);

效果如下
百度地图的基础应用-风君子博客

信息窗口

var opts = {width: 250,     // 信息窗口宽度height: 200,    // 信息窗口高度title: "学好前端，月薪过万！"  // 信息窗口标题}//信息窗口var infoWindow = new BMapGL.InfoWindow`<p>前端很简单只有<b>js</b></p><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.X7zAISrtwheOb3BM67fYSgHaE8?w=186&h=124&c=7&r=0&o=5&pid=1.7">`, opts);  // 创建信息窗口对象map.openInfoWindowinfoWindow, point);        // 打开信息窗口marker.addEventListener"click",e=>{//单击显示map.openInfoWindowinfoWindow,point)})

效果如下
百度地图的基础应用-风君子博客

标注

//创建标签var label = new BMapGL.Label"中国前端学习基地", {       // 创建文本标注position: point,                          // 设置标注的地理位置offset: new BMapGL.Size0, 0)           // 设置标注的偏移量})  //添加标签map.addOverlaylabel);                        // 将标注添加到地图中

效果如下
百度地图的基础应用-风君子博客

移除覆盖物

    map.removeOverlay覆盖物)

地图的事件

   map.addEventListener"click",e=>{})

地图搜索

//创建一个本地搜索var local = new BMapGL.LocalSearchmap,{renderOptions:{map:map}})

local.search搜索关键字)

效果如下
百度地图的基础应用-风君子博客

vue中使用百度地图

1.public/index.htmlscript 引入百度地图
2在组件中定义data

  data) {return {map: null,point: null,marker: null,keyword: "",local: null,};},

3. mounted初始化项目

mounted) {//为什什么第三万api需要加window// echarts 还是BMapGL 都是挂载到window.上面的//如果直接使用在当前的组件里面没有导入这个BMapGL会报错? 效果也会出来，js会向上查找到)// 基本上第三方组件，却需要在mounted组件渲染完毕后再执行初始化确保js已经加裁完毕)this.map = new window.BMapGL.Mapthis.$refs.map);this.point = new window.BMapGL.Point113.665, 34.784);this.map.centerAndZoomthis.point, 15);//鼠标滚轮缩放this.map.enableScrollWheelZoomtrue);// 添加一个点this.marker = new window.BMapGL.Markerthis.point);// 添加覆盖物this.map.addOverlaythis.marker);//创建一个本地搜索this.local = new window.BMapGL.LocalSearchthis.map, {renderOptions: { map: this.map },});},

4.监听数据变化，更新地图

watch: {keyword: {handler) {if this.keyword === "") {//如果为空就清除搜索this.local.clearResults);//缩放到中心点this.map.centerAndZoomthis.point, 15);} else {this.local.searchthis.keyword);}},},},

可以通过vue地图插件

vue-baidu-map ⭐170-基于 vue2的百度地图组件库
https://dafrok.github.io/vue-baidu-map