解释:
- LBS:LocationBusinessServer 基于定义位置的商业服务
- 百度地图|高德地图
- 百度地图开放平台 | 百度地图API SDK | 地图开发
使用步骤:
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.centerAndzoom(point, 1 5); //鼠标滚轮缩放 map.enableScrollWheelZoom(true);
添加地图控制器
// 不要去记忆,要去官网粘贴复制 var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件 map.addControl(scaleCtrl); var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件 map.addControl(zoomCtrl); var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件 map.addControl(cityCtrl);
- 地图上绘制内容
点:
var p = new BMapGL.Point(e.latlng.lng,e.latlng.lat);
// 创建标记
var m = new BMapGL.Marker(p);
线:
var polyline = new BMapGL.Polyline(line,{strokeStyle:"dashed",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
面:
var polygone = new BMapGL.Polygon(line,{fillColor:"red",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})
圆形:
// 绘制圆圈
var circle = new BMapGL.Circle(point,2000,{strokeColor:"green"});
// 添加圆圈
map.addOverlay(circle);
信息窗口:
标注:
var label = new BMapGL.Label("中国前端学习基地", { // 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(0, 0) // 设置标注的偏移量
})
// 添加标签
map.addOverlay(label); // 将标注添加到地图中
// 设置标签的样式
label.setStyle({
fontSize:"32px",
color:"red"
})
移除覆盖物:
map.removeOverlay(覆盖物);
地图的事件:
地图的事件
map.addEventListener("click",e=>{
marker.addEventListener(地图覆盖物都可以添加事件)
在vue中使用地图:
1.public/index.html script引入百度地图
map: null,
point: null,
marker: null,
keyword: "",
local: null,
3mounted初始化项目
// 初始化地图
this.map = new window.BMapGL.Map(this.$refs.map);
// 准备一个中心点(经度,纬度)
this.point = new window.BMapGL.Point(116.404, 39.915);
// 设置中心点和缩放级别
this.map.centerAndZoom(this.point, 15);
// 鼠标滚轮缩放
this.map.enableScrollWheelZoom(true);
//添加一个点
this.marker = new window.BMapGL.Marker(this.point);
//添加覆盖物
this.map.addOverlay(this.marker);
// 百度地图API功能
this.local = new window.BMapGL.LocalSearch(this.map, {
renderOptions: {
map: this.map
}
});
},
4.监听数据变化,更新地图
watch: {
keyword:{
handler() {
if (this.keyword === "") {
this.local.clearResults()
this.map.centerAndZoom(this.point, 15);
} else {
this.local.search(this.keyword)
}
}
}
}
地图搜索:
local.search(搜索关键字)
var local = new BMapGL.LocalSearch(map, {
renderOptions: {
map: map
}
})
可以通过vue地图插件:
vue-baidu-map 170-基于Vue2的百度地图组件库