版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39378691/article/details/83829188
效果图如下：
1.申请百度地图密钥（ak）-- http://lbsyun.baidu.com/index.php?title=jspopular
（1）百度地图开放平台–开发文档–web开发–JavaScript API–服务介绍–产品简介–申请密钥（ak）
（2）查看应用–创建应用–应用名称、应用类型（vue中使用百度地图需要选择浏览器端，因为浏览器端的启用服务包括Javascript API）、Referer白名单–提交
（3）查看应用–访问应用（AK）
2.在index.html中添加百度地图JavaScript API接口
<body>
<div id="app"></div>
<!--引入百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=zpxXXXlFZ" ></script>
</body>
3.在build文件的webpack.base.conf.js配置文件中的module.exports配置BMap（创建BMap对象），与entry，output，module平级
externals: {
"BMap": "BMap"
},
4.地图组件中
<template>
<div id="all">
<input type="text" id="suggestId" name="address_detail" placeholder="地址" v-model="address_detail" class="input_style">
<div id="allmap"></div>
</div>
</template>
<script>
//import BMap from 'BMap'
export default {
data(){
return {
//详细地址
address_detail: null,
userlocation: {lng: "", lat: ""}
}
},
mounted(){
this.$nextTick(function () {
var th = this
// 创建Map实例
var map = new BMap.Map("allmap");
// 初始化地图,设置中心点坐标，
var point = new BMap.Point(121.160724,31.173277);
// 创建点坐标，汉得公司的经纬度坐标
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom();
//建立一个自动完成的对象
var ac = new BMap.Autocomplete({
"input": "suggestId" ,
"location": map
})
var myValue
//鼠标点击下拉列表后的事件
ac.addEventListener("onconfirm", function (e) {
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
this.address_detail = myValue
setPlace();
});
function setPlace() {
//清除地图上所有覆盖物
map.clearOverlays();
function myFun() {
//获取第一个智能搜索的结果
th.userlocation = local.getResults().getPoi(0).point;
map.centerAndZoom(th.userlocation, 18);
//添加标注
map.addOverlay(new BMap.Marker(th.userlocation));
}
//智能搜索
var local = new BMap.LocalSearch(map, {
onSearchComplete: myFun
});
local.search(myValue);
//测试输出坐标（指的是输入框最后确定地点的经纬度）
map.addEventListener("click",function(e){
//经度
console.log(th.userlocation.lng);
//维度
console.log(th.userlocation.lat);
})
}
})
},
}
</script>
