百度地图
解释
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