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(未整理)