https://dafrok.github.io/vue-baidu-map/#/zh/index
vue-baidu-map 使用("踩坑")心得
<el-form-item label="详细地址" >
<el-autocomplete
v-model="origin.detailAddress"
:fetch-suggestions="mapSearch"
placeholder="请输入详细地址"
style="width: 100%"
:trigger-on-focus="false"
@select="mapSelect"
/>
</el-form-item>
<el-form-item>
<baidu-map class="map" :center="center" :zoom="zoom" @ready="handlermap"
:scroll-wheel-zoom="true"
@click="clickEvent"
ak="33B192o1jPaqOHASGGAIkoMuwi8WXXX">
<!-- 地图控件位置 -->
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<!-- 获取城市列表 -->
<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
<!-- 定位当前位置 -->
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" @locationSuccess="getLoctionSuccess" ></bm-geolocation>
<!-- 地图容器 -->
<bm-view :style="{width:'100%',height: '500px'}"></bm-view>
</baidu-map>
</el-form-item>
return
center: {lng: 106.632713, lat: 26.653157},
zoom: 12,
mapVisible:false,
clientHeight:document.documentElement.clientHeight-90, // 设置屏幕高度
mapLocation: {
address: undefined,
coordinate: undefined
}
methods
handlermap ({BMap, map}) {
let _this = this; // 设置一个临时变量指向vue实例；
var geolocation = new BMap.Geolocation();
this.BMap = BMap;
this.map = map;
geolocation.getCurrentPosition(function(r){
// console.log(r);
_this.center = {lng: r.longitude, lat: r.latitude}; // 设置center属性值
// console.log('_this.center',_this.origin);
if(_this.origin.latitude&&_this.origin.longitude){
let transqq = qqMapTransBMap(_this.origin.longitude,_this.origin.latitude);
// console.log('transqq',transqq);
_this.center = {lng:transqq.lng, lat: transqq.lat};
};
let Icon_0 = new BMap.Icon("static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
let myMarker = new BMap.Marker(new BMap.Point(_this.origin.longitude, _this.origin.latitude),{icon: Icon_0});
map.addOverlay(myMarker);
_this.autoLocationPoint = {lng: r.longitude, lat: r.latitude}; // 自定义覆盖物
_this.initLocation = true;
},{enableHighAccuracy: true})
window.map = map;
},
//点击地图监听
clickEvent(e){
map.clearOverlays();
let Icon_0 = new BMap.Icon("static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat),{icon: Icon_0});
map.addOverlay(myMarker);
//用所定位的经纬度查找所在地省市街道等信息
var point = new BMap.Point(e.point.lng, e.point.lat);
var gc = new BMap.Geocoder();
let _this = this;
gc.getLocation(point, function (rs) {
var addComp = rs.addressComponents;
console.log(rs);//地址信息
_this.origin.provinceName = rs.addressComponents.province;
_this.origin.cityName = rs.addressComponents.city;
_this.origin.countyName = rs.addressComponents.district;
_this.origin.detailAddress = rs.address;
});
//转为高德坐标
let transGaode = bMapTransQQMap(e.point.lng,e.point.lat);
this.origin.longitude = transGaode.lng;
this.origin.latitude = transGaode.lat;
// this.origin.longitude = e.point.lng;
// this.origin.latitude = e.point.lat;
},
//定位成功回调
getLoctionSuccess(point, AddressComponent, marker){
// map.clearOverlays();
// let Icon_0 = new BMap.Icon("/static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
// var myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat),{icon: Icon_0});
// map.addOverlay(myMarker);
// this.company.longitude = point.point.lng;
// this.company.latitude = point.point.lat;
},
findlocation(){
this.$emit("findlocdata",this.company)
this.mapVisible = false
},
mapShow(){
this.mapVisible = true
},
mapSearch(queryString, cb) {
var that = this
var myGeo = new this.BMap.Geocoder()
myGeo.getPoint(queryString, function(point) {
if (point) {
that.mapLocation.coordinate = point
that.makerCenter(point)
} else {
that.mapLocation.coordinate = null
}
}, this.locationCity)
var options = {
onSearchComplete: function(results) {
if (local.getStatus() === 0) {
// 判断状态是否正确
var s = []
for (var i = 0; i < results.getCurrentNumPois(); i++) {
var x = results.getPoi(i)
var item = { value: x.address + x.title, point: x.point }
s.push(item)
cb(s)
}
} else {
cb()
}
}
}
var local = new this.BMap.LocalSearch(this.map, options)
local.search(queryString)
},
mapSelect(e) {
// console.log('e',e.point);
this.getMapInfo(e.point);
//转为高德坐标
let transGaode = bMapTransQQMap(e.point.lng,e.point.lat);
this.origin.longitude = transGaode.lng;
this.origin.latitude = transGaode.lat;
var { point } = e
this.mapLocation.coordinate = point
this.makerCenter(point)
},
makerCenter(point) {
if (this.map) {
this.map.clearOverlays()
this.map.addOverlay(new this.BMap.Marker(point))
this.center.lng = point.lng
this.center.lat = point.lat
this.zoom = 15
}
},
getMapInfo(point){
//用所定位的经纬度查找所在地省市街道等信息
var point = new BMap.Point(point.lng, point.lat);
var gc = new BMap.Geocoder();
let _this = this;
gc.getLocation(point, function (rs) {
var addComp = rs.addressComponents;
// console.log('getMapInfo',rs);//地址信息
_this.origin.provinceName = rs.addressComponents.province;
_this.origin.cityName = rs.addressComponents.city;
_this.origin.countyName = rs.addressComponents.district;
_this.origin.detailAddress = rs.address;
});
},
地图经纬度转换
// 将百度地图经纬度转换为腾讯/高德地图经纬度
export function bMapTransQQMap(lng, lat) {
let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
let x = lng - 0.0065;
let y = lat - 0.006;
let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
let lngs = z * Math.cos(theta);
let lats = z * Math.sin(theta);
return {
lng: lngs,
lat: lats
}
}
// 将腾讯/高德地图经纬度转换为百度地图经纬度
export function qqMapTransBMap(lng, lat) {
let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
let x = lng;
let y = lat;
let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
let lngs = z * Math.cos(theta) + 0.0065;
let lats = z * Math.sin(theta) + 0.006;
return {
lng: lngs,
lat: lats
}
}
转载请注明：有爱前端 » vue-baidu-map(未整理)
