1. bmpgl.js
export function BMPGL(ak) {
return new Promise(function(resolve, reject) {
window.init = function() {
// eslint-disable-next-line
resolve(BMapGL)
}
const script = document.createElement('script')
script.type = 'text/javascript'
script.src = `http://api.map.baidu.com/api?v=3.0&type=webgl&ak=${ak}&callback=init`
script.onerror = reject
document.head.appendChild(script)
})
}
2. demo.vue
<template>
<div class="fizc">
<div class="inputleft">活动地点</div>
<input type="text" placeholder="请输入活动地点" v-model="address.address" id="suggestId" class="inpute">
<input type="text" id="itude" v-model="address.itude" v-show="false">
</div>
<div>
<div class="baidu" ref="mapRef" id="baidumap"></div>
</div>
</template>
<script>
import { BMPGL } from "@/utils/bmpgl.js";
export default ({
data(){
return{
address:{
address:"",
itude:"",//经纬度
},
map:{},
mapZoom: 15,
ak: "ySm72UG7u*********516jToN", // 百度的地图密钥AK,需要加IP或域名的白名单
}
},
methods:{
initMap(){
var _this = this
_this.map = null
BMPGL(this.ak).then((BMapGL) => {
_this.map = new BMapGL.Map("baidumap");
var ac = new BMapGL.Autocomplete( //建立一个自动完成的对象
{"input" : "suggestId","location" : _this.map});
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
_this.map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
_this.map.addControl(cityCtrl);
var LocationControl= new BMapGL.LocationControl(); // 添加定位控件,用于获取定位
_this.map.addControl(LocationControl);
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
_this.map.addControl(scaleCtrl);
_this.map.setMapType(); // 设置地图类型为标准地图模式;
var localcity = new BMapGL.LocalCity();
localcity.get(e => {
_this.map.centerAndZoom(e.name, _this.mapZoom);
})
let point
var lng = "",lat = ""
//初始化的时候如果有经纬度,需要先在地图上添加点标记
if(_this.address.itude){
var lnglat = _this.address.itude
var lnglat_arr = lnglat.split(',')
lng = lnglat_arr[0]
lat = lnglat_arr[1]
point = new BMapGL.Point(lng, lat)
_this.map.centerAndZoom(point, _this.mapZoom)
var marker2 = new BMapGL.Marker(point);
//在地图上添加点标记
_this.map.addOverlay(marker2);
}
_this.map.enableScrollWheelZoom(true)
_this.map.setHeading(64.5)
_this.map.setTilt(73)
//点击下拉框的值
_this.map.addEventListener('click', function (e) {
_this.map.clearOverlays();
var point1 = new BMapGL.Point(e.latlng.lng, e.latlng.lat)
// 创建点标记
var marker1 = new BMapGL.Marker(point1);
// 在地图上添加点标记
_this.map.addOverlay(marker1);
_this.address.itude = e.latlng.lng+','+e.latlng.lat
});
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
_this.address.address = _value.province + _value.city + _value.district + _value.street + _value.business;
// 搜索
_this.map.clearOverlays(); //清除地图上所有覆盖物
//智能搜索
var local = new BMapGL.LocalSearch(_this.map, {
onSearchComplete: ()=>{
//获取第一个智能搜索的结果
const pp = local.getResults().getPoi(0).point;
_this.map.centerAndZoom(pp, _this.mapZoom);
_this.map.addOverlay(new BMapGL.Marker(pp)); //添加标注
_this.address.itude = pp.lng+','+pp.lat
}
});
local.search(_this.address.address);
});
}).catch((err) => {
console.log(err)
})
},
},
mounted(){
this.initMap()
},
})
</script>
<style>
.tangram-suggestion {
z-index: 10000;
}
</style>
<style scoped lang="scss">
#baidumap{
width: 100%;
height: 400px;
}
:deep()
.BMap_cpyCtrl {
display: none!important;
}
</style>