一.百度地图简介
百度地图官方网站 lbs.baidu.com/，LBS：locationBusinessServer 基于定义位置的商业服务。百度地图提供七大功能与服务：定位、地图、轨迹、路线规划、导航、路况、搜索等
二.简单使用
1.登录注册，获取密钥(AK)
2.引入js
<script type="text/javascript"
src="https://api.map.baidu.com/apiv=1.0&&type=webgl&ak=L1YGW8qk0fHKxneUYjLLxq8GlOZv5xau">
//L1YGW8qk0fHKxneUYjLLxq8GlOZv5xau即为第一步获取的AK
3.创建容器
//创建容器样式
<style>
#container{
width: 800px;
height: 600px;
}
</style>
//创建容器
<div id="container"></div>
4.初始化
var map = new BMapGL.Map("container");//容器
var point = new BMapGL.Point(116.404, 39.915);//设立中心点在天安门
map.centerAndZoom(point, 15);//设置地图展示级别
map.enableScrollWheelZoom(true)//添加鼠标滚轮控制缩放
三.高级运用
1.引入控件
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
2.点、线、面
var map = new BMapGL.Map("container");
var point= new BMapGL.Point(113.665, 34.784);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
//添加点
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);
});
//添加点
var marker=new BMapGL.Marker(point);
//添加覆盖物
map.addOverlay(marker);
//存储多个点
var line=[];
//存储覆盖物的点
var markers=[];
//监听事件
map.addEventListener("click",e=>{
//创建点
var p=new BMapGL.Point(e.latlng.lng,e.latlng.lat);
//创建标记
var m=new BMapGL.Marker(p);
markers.push(m);
//添加标记
map.addOverlay(m);
console.log(e);
//存储点
line.push(p);
})
//以下是线
map.addEventListener("dblclick",e=>{
//把第0个点放到最后
line.push(line[0]);
//创建多边形线
var polyline=new BMapGL.Polyline(line, {strokeStyle:"dashed",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
//添加线
map.addOverlay(polyline);
//清空点的列表
line=[];
//清空覆盖物
markers.forEach(item=>map.removeOverlay(item));
markers=[];
})
3.信息窗口
var map = new BMapGL.Map("container");
var point= new BMapGL.Point(113.665, 34.784);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
var marker=new BMapGL.Marker(point);
map.addOverlay(marker);
//添加信息窗口
var opts = {
width: 250, // 信息窗口宽度
height: 200, // 信息窗口高度
title: "学好前端，月薪过万" // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow(`<p>学好前端</p><img src="图片路径" width=200>`, opts); // 创建信息窗口对象
// 创建信息窗口对象
map.openInfoWindow(infoWindow,point);
// map.getCenter() 获取到地图的中心位置
//单击显示
marker.addEventListener("click",e=>{
map.openInfoWindow(infoWindow,point);
})
4.地图搜索
<body>
<input type="text" onchange="search(this)">
<!-- 建立容器 -->
<div id="container"></div>
</body>
<script>
var map = new BMapGL.Map("container");
var point= new BMapGL.Point(113.665, 34.784);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
var marker=new BMapGL.Marker(point);
map.addOverlay(marker);
//创建一个本地搜索
var local = new BMapGL.LocalSearch(map, {
renderOptions:{map: map}
});
//表单值发生变化时进行搜索
function search(e){
local.search(e.value);
}
</script>
四.在Vue中使用
- public->index.js导入百度地图；
- src->router->index.js 对路由进行配置；
- src->views中建立地图引入的视图及容器。
<template>
<div >
<h1>百度地图</h1>
<input type="text" v-model.lazy="keyword">
<div id="map" ref="map"></div>
</div>
</template>
<script>
export default {
data(){
return{
map:null,
point:null,
marker:null,
keyword:"",
local:null,
}
},
mounted(){
this.map=new window.BMapGL.Map(this.$refs.map)
this.point=new window.BMapGL.Point(113.665,34.784)
this.map.centerAndZoom(this.point,15)
this.map.enableScrollWheelZoom(true);
this.marker=new window.BMapGL.Marker(this.point)
this.map.addOverlay(this.marker)
this.local=new window.BMapGL.LocalSearch(this.map,{
renderOptions:{map:this.map}
})
},
watch:{
keyword:{
handler(){
if(this.keyword===''){
this.local.clearResults()
this.map.centerAndZoom(this.point,15)
}else{
this.local.search(this.keyword)
}
}
}
}
}
</script>
<style scoped>
#map{
width: 100%;
height: 80vh;
}
</style>
