vue中引入百度地图

<template>
<div>
<el-input v-model="inputaddr">
</el-input>
<el-button @click="mapCpm">点击</el-button>
<el-dialog :modal-append-to-body="false"
:title="textMap[dialogStatus]"
:visible.sync="mapCPM">
<baidu-map class="map"
:center="center"
:zoom="zoom"
@ready="handler"
:double-click-zoom='false'
:scroll-wheel-zoom='true'>
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
:showAddressBar="true"
:autoLocation="true"
@locationSuccess='locationSuccess'></bm-geolocation>
<bm-panorama></bm-panorama>
<bm-marker :position="center"
@dragend="dragend"
:raiseOnDrag='true'
:dragging='true'>
</bm-marker>
</baidu-map>
<el-row class="map_title">
<el-col :span=""
class="map_title_span">
<p>经度：{{locationdata.center ? locationdata.center.lng : center.lng}}</p>
<p>纬度：{{locationdata.center ? locationdata.center.lat : center.lat}}</p>
<p>地址：{{locationdata.addr}}</p>
</el-col> <el-col :span="">
<el-button type="info"
size="small"
@click="getmapdamodata()">提交</el-button>
</el-col>
</el-row>
</el-dialog> </div>
</template>
<script>
export default {
data () {
return {
fullscreenLoading: false,//地图加载动画
// 地图初始化的位置
center: { lng: 113.18088529892, lat: 23.460952009562 },
// 地图内的大小
zoom: ,
// 这个是搜索下的东西
location: '',
// 这个是选择搜索列表中数据的title以及经纬度
locationdata: {
title: '',
center: '',
addr: ''//地址
},
geolocation: "",
BMap: '',
textMap: {
map: '地图'
},
dialogStatus: 'map',
mapCPM: false,
inputaddr: ''
}
},
mounted () { },
methods: {
// 由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
handler ({ BMap, map }) {
const loading = this.$loading({//加载动画
lock: true,
text: '动图加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
}); window.map = map; //注册为全局
var that = this; // map方法中的this指向不对。所有申明一个。。小细节的东西
// 刚进入页面中的定位，需要向用户授权
var geolocation = new BMap.Geolocation();
console.log(geolocation)
this.geolocation = geolocation;
geolocation.getCurrentPosition(() => {
// console.log('data')
// alert('nimamaipi')
})
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function (r) { if (this.getStatus() == BMAP_STATUS_SUCCESS) {
// 把得到的经纬度传给map，就实现了第一步我们的定位
that.center = {
lng: r.point.lng,
lat: r.point.lat
}
console.log("wang", r)
// var a = r.address.city
// var b = r.address.district
// var c = r.address.province
// var d = r.address.street
// var e = r.address.street_number // console.log(a);
// console.log(b);
// console.log(c);
// console.log(d);
// console.log(e); // var f = ''
// this.locationdata.addr = ''
// f = a + b + c + d + e
// this.locationdata.addr = f
// console.log(f); // this.locationdata.addr = r.address.city + r.address.district + r.address.province + r.address.street + r.address.street_number
// 当用户拒绝该授权的时候，依然执行
if (r.accuracy == null) {
// alert('accuracy null:'+r.accuracy);
//用户决绝地理位置授权
return;
}
} else {
console.log('failed' + this.getStatus());
}
}, { enableHighAccuracy: true })
this.BMap = BMap
loading.close();
},
mapCpm () {
//打开地图弹窗
this.dialogStatus = 'map'
this.mapCPM = true
},
locationSuccess (point, AddressComponent, marker) {
//定位成功后
console.log(point);
this.locationdata.center = point.point
this.locationdata.addr = point.addressComponent.city + point.addressComponent.district + point.addressComponent.province + point.addressComponent.street + point.addressComponent.streetNumber
this.center = point.point
},
// 选择localtion的值
// getlocalsearch (e) {
// this.locationdata.title = e.address + e.title;
// this.locationdata.center = e.point;
// },
dragend (type, target, pixel, point) { //拖拽结束触发
this.locationdata.center = type.point;
// this.position = type.point
const _this = this
const gc = new this.BMap.Geocoder()
gc.getLocation(type.point, function (rs) {
console.log("aaaaaaaaaaaaaaa", rs)
_this.locationdata.addr = rs.address
})
},
// 确定该信息然后存在session中
getmapdamodata () {
this.inputaddr = this.locationdata.addr
this.mapCPM = false
} }
}
</script>
<style>
.map {
width: %;
height: 500px;
}
.anchorBL {
display: none;
}
.map_title {
display: flex;
justify-content: center;
align-items: center;
padding: .1533rem;
}
</style>

import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: '百度ak'
});

<template>
<div> <el-button @click="mapCpm">点击</el-button>
<el-dialog :modal-append-to-body="false"
:title="textMap[dialogStatus]"
:visible.sync="mapCPM"> <baidu-map class="map"
:center="center"
:zoom="zoom"
@ready="handler"
:double-click-zoom='false'
:scroll-wheel-zoom='true'
@click="clickBaiDuMap"> <bm-view class="map"></bm-view>
<bm-control :offset="{width: '10px', height: '10px'}">
<bm-auto-complete v-model="keyword"
:sugStyle="{zIndex: 0}">
<el-input placeholder="请输入地名关键字"
v-model="keyword"></el-input> <!-- 这里指代一个自定义搜索框组件 -->
<bm-local-search :keyword="keyword"
:auto-viewport="true"
style="width:0px;height:0px;opacity:0"></bm-local-search> </bm-auto-complete>
</bm-control> <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
:showAddressBar="true"
:autoLocation="true"
@locationSuccess='locationSuccess'></bm-geolocation>
<bm-panorama></bm-panorama>
<bm-marker :position="locationdata.center"
@dragend="dragend"
:raiseOnDrag='true'
:dragging='true'>
</bm-marker>
</baidu-map>
<el-row class="map_title">
<el-col :span=""
class="map_title_span">
<p>经度：{{locationdata.center ? locationdata.center.lng : center.lng}}</p>
<p>纬度：{{locationdata.center ? locationdata.center.lat : center.lat}}</p>
<p>地址：{{locationdata.addr}}</p>
</el-col> <el-col :span="">
<el-button type="info"
size="small"
@click="getmapdamodata()">提交</el-button>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
return {
keyword: '',
city: '',//输入框搜索内容
address_detail: null, //详细地址
fullscreenLoading: false,//地图加载动画
// 地图初始化的位置
center: { lng: 113.18088529892, lat: 23.460952009562 },
// 地图内的大小
zoom: ,
// 这个是搜索下的东西
location: '',
// 这个是选择搜索列表中数据的title以及经纬度
locationdata: {
title: '',
center: '',
addr: ''//地址
},
geolocation: "",
BMap: '',
textMap: {
map: '地图'
},
dialogStatus: 'map',
mapCPM: false,
inputaddr: ''
}
},
mounted () { },
methods: {
// 由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
handler ({ BMap, map }) {
const loading = this.$loading({//加载动画
lock: true,
text: '动图加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
}); window.map = map; //注册为全局
var that = this; // map方法中的this指向不对。所有申明一个。。小细节的东西
// 刚进入页面中的定位，需要向用户授权
var geolocation = new BMap.Geolocation();
console.log(geolocation)
this.geolocation = geolocation;
geolocation.getCurrentPosition(() => {
// console.log('data')
// alert('nimamaipi')
})
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function (r) { if (this.getStatus() == BMAP_STATUS_SUCCESS) {
// 把得到的经纬度传给map，就实现了第一步我们的定位
that.center = {
lng: r.point.lng,
lat: r.point.lat
}
console.log("wang", r) var a = r.address.city
var b = r.address.district
var c = r.address.province
var d = r.address.street
var e = r.address.street_number console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e); var f = ''
//this.locationdata.addr = ''
f = a + b + c + d + e
window.title = f;//注册为全局
// this.locationdata.addr = f
console.log(f);
// this.locationdata.addr = r.address.city + r.address.district + r.address.province + r.address.street + r.address.street_number
// 当用户拒绝该授权的时候，依然执行
if (r.accuracy == null) {
// alert('accuracy null:'+r.accuracy);
//用户决绝地理位置授权
return;
}
} else {
console.log('failed' + this.getStatus());
}
}, { enableHighAccuracy: true })
this.BMap = BMap
loading.close();
},
mapCpm () {
//打开地图弹窗
setTimeout(() => {
if (window.title != '' && window.title != null) {
this.locationdata.addr = window.title
window.title = ''
}
}, ) console.log(window.title); this.dialogStatus = 'map'
this.mapCPM = true
},
locationSuccess (point, AddressComponent, marker) {
//定位成功后
console.log(point);
this.locationdata.center = point.point
this.locationdata.addr = point.addressComponent.city + point.addressComponent.district + point.addressComponent.province + point.addressComponent.street + point.addressComponent.streetNumber
this.center = point.point
},
// 选择localtion的值
// getlocalsearch (e) {
// this.locationdata.title = e.address + e.title;
// this.locationdata.center = e.point;
// },
dragend (type, target, pixel, point) { //拖拽结束触发
this.locationdata.center = type.point;
// this.position = type.point
const _this = this
const gc = new this.BMap.Geocoder()
gc.getLocation(type.point, function (rs) {
console.log("aaaaaaaaaaaaaaa", rs)
_this.locationdata.addr = rs.address
})
},
// 确定该信息然后存在session中
getmapdamodata () {
this.inputaddr = this.locationdata.addr
this.mapCPM = false
},
clickBaiDuMap (type, target, point, pixel, overlay) {
console.log(type);
console.log(target); console.log(point); console.log(pixel); console.log(overlay);
this.locationdata.center = type.point;
// this.center = type.point
// this.position = type.point
const _this = this
const gc = new this.BMap.Geocoder()
gc.getLocation(type.point, function (rs) {
console.log("aaaaaaaaaaaaaaa", rs)
_this.locationdata.addr = rs.address
})
}, }
}
</script>
<style scoped>
.map {
width: %;
height: 500px;
}
.anchorBL {
display: none;
}
.map_title {
display: flex;
justify-content: center;
align-items: center;
padding: .1533rem;
}
</style>