# 百度地图
<template>
<div style="background-color: #f2f2f2">
<baidu-map
class="map"
:center="{lng: 120.548102, lat: 40.356984}"
:zoom="16"
ref="baiduMap"
@touchmove="syncPolyline"
@touchstart="paintPolyline"
@contextmenu.prevent="newPolyline"
@ready="handler">
<bm-polygon :path="path" v-for="(path,i) of polyline.paths" :key="i"></bm-polygon>
</baidu-map>
<!-- <bm-control>
</bm-control> -->
<div id="btn">
<!-- <div>{{ polyline }}</div> -->
<!-- <button @click="toggle('polyline')">{{ polyline.editing ? '停止绘制' : '开始绘制' }}</button> -->
<!-- <nut-button
type="light"
>
退出
</nut-button>
<nut-button
type="light"
>
清除
</nut-button> -->
<nut-button
@click="draw"
class="draw"
v-if="!polyline.editing"
>
开始绘制
</nut-button>
<nut-button
@click="confim"
class="save"
>
确认
</nut-button>
</div>
</div>
</template>
<script>
import imageUrl from './img/xdp.png';
export default {
components: {
TopBar
},
data () {
return {
polyline: {
paths: [],
editing: false,
},
arr:[],
BMap:null,
pointArr:[]
}
},
methods: {
draw(){
this.polyline.editing = true
},
handler(obj){
// leftBottomCoordinate: new Point(120.545832, 40.349957),
// rightTopCoordinate: new Point(120.570629, 40.366178)
const BMap = obj.BMap;
this.BMap =obj.BMap
console.warn(obj)
const bounds = new BMap.Bounds({lng: 120.545832, lat:40.349957}, {lng: 120.570629, lat:40.366178});
const imgOverlay = new BMap.GroundOverlay(
bounds,
{
imageURL: imageUrl,
opacity: 0.7,
displayOnMinLevel: 5,
displayOnMaxLevel: 20
}
);
this.$refs.baiduMap.map.addOverlay(imgOverlay);
},
async confim(){
this.polyline.paths[0].forEach(el=>{
// 百度坐标转84坐标
let val1 = coordtransform.bd09togcj02(el.lng,el.lat)
let val2 = coordtransform.gcj02towgs84(val1[0],val1[1])
this.pointArr.push(...val2)
})
const stringCoord= this.pointArr.join()
this.$router.back()
},
toggle (name) {
this[name].editing = !this[name].editing
},
syncPolyline (e) {
if (!this.polyline.editing) {
return
}
const {paths} = this.polyline
if (!paths.length) {
return
}
const path = paths[paths.length - 1]
if (!path.length) {
return
}
if (path.length === 1) {
path.push(e.point)
}
this.$set(path, path.length - 1, e.point)
},
newPolyline (e) {
if (!this.polyline.editing) {
return
}
const {paths} = this.polyline
if(!paths.length) {
paths.push([])
}
const path = paths[paths.length - 1]
path.pop()
if (path.length) {
paths.push([])
}
},
paintPolyline (e) {
if (!this.polyline.editing) {
return
}
const {paths} = this.polyline
!paths.length && paths.push([])
this.arr.push(e.point.lng,e.point.lat)
paths[paths.length - 1].push(e.point)
}
}
}
</script>
# 添加图标
const icon = new BMap.Icon(
require("./img/carmap.png"), // 图标路径
new BMap.Size(72, 72), // 视窗大小
{
imageSize: new BMap.Size(72, 72), // 图标实际大小
imageOffset: new BMap.Size(0, 0), // 图片相对视窗的偏移
anchor: new BMap.Size(36, 36), // 图标锚点
}
);
console.warn(icon, "icon");
// 添加标记物
const marker = new BMap.Marker(new BMap.Point(val2[0], val2[1]), {
icon: icon,
});
this.$refs.baiduMap.map.addOverlay(marker);
# 百度地图转换经纬度
只能说是相对于参考，误差率不明。
/**
* Created by Wandergis on 2015/7/8.
* 提供了百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换
* coordtransform.js
*/
//UMD魔法代码
// if the module has no dependencies, the above pattern can be simplified to
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.coordtransform = factory();
}
}(this, function () {
//定义一些常量
var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
var PI = 3.1415926535897932384626;
var a = 6378245.0;
var ee = 0.00669342162296594323;
/**
* 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
* 即 百度 转 谷歌、高德
* @param bd_lon
* @param bd_lat
* @returns {*[]}
*/
var bd09togcj02 = function bd09togcj02(bd_lon, bd_lat) {
var bd_lon = +bd_lon;
var bd_lat = +bd_lat;
var x = bd_lon - 0.0065;
var y = bd_lat - 0.006;
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_PI);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_PI);
var gg_lng = z * Math.cos(theta);
var gg_lat = z * Math.sin(theta);
return [gg_lng, gg_lat]
};
/**
* 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
* 即谷歌、高德 转 百度
* @param lng
* @param lat
* @returns {*[]}
*/
var gcj02tobd09 = function gcj02tobd09(lng, lat) {
var lat = +lat;
var lng = +lng;
var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
var bd_lng = z * Math.cos(theta) + 0.0065;
var bd_lat = z * Math.sin(theta) + 0.006;
return [bd_lng, bd_lat]
};
/**
* WGS84转GCj02
* @param lng
* @param lat
* @returns {*[]}
*/
var wgs84togcj02 = function wgs84togcj02(lng, lat) {
var lat = +lat;
var lng = +lng;
if (out_of_china(lng, lat)) {
return [lng, lat]
} else {
var dlat = transformlat(lng - 105.0, lat - 35.0);
var dlng = transformlng(lng - 105.0, lat - 35.0);
var radlat = lat / 180.0 * PI;
var magic = Math.sin(radlat);
magic = 1 - ee * magic * magic;
var sqrtmagic = Math.sqrt(magic);
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
var mglat = lat + dlat;
var mglng = lng + dlng;
return [mglng, mglat]
}
};
/**
* GCJ02 转换为 WGS84
* @param lng
* @param lat
* @returns {*[]}
*/
var gcj02towgs84 = function gcj02towgs84(lng, lat) {
var lat = +lat;
var lng = +lng;
if (out_of_china(lng, lat)) {
return [lng, lat]
} else {
var dlat = transformlat(lng - 105.0, lat - 35.0);
var dlng = transformlng(lng - 105.0, lat - 35.0);
var radlat = lat / 180.0 * PI;
var magic = Math.sin(radlat);
magic = 1 - ee * magic * magic;
var sqrtmagic = Math.sqrt(magic);
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
var mglat = lat + dlat;
var mglng = lng + dlng;
return [lng * 2 - mglng, lat * 2 - mglat]
}
};
var transformlat = function transformlat(lng, lat) {
var lat = +lat;
var lng = +lng;
var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
return ret
};
var transformlng = function transformlng(lng, lat) {
var lat = +lat;
var lng = +lng;
var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
return ret
};
/**
* 判断是否在国内，不在国内则不做偏移
* @param lng
* @param lat
* @returns {boolean}
*/
var out_of_china = function out_of_china(lng, lat) {
var lat = +lat;
var lng = +lng;
// 纬度3.86~53.55,经度73.66~135.05
return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55);
};
return {
bd09togcj02: bd09togcj02,
gcj02tobd09: gcj02tobd09,
wgs84togcj02: wgs84togcj02,
gcj02towgs84: gcj02towgs84
}
}));
← echarts与地图 echarts封装 →