由于公司不续费百度地图，所以切换高德。。。
一、注册
- 高德需要这样，先安装
@amap/amap-jsapi-loader
import AMapLoader from "@amap/amap-jsapi-loader";mapInit(point){window._AMapSecurityConfig = {// 安全密钥securityJsCode: "*********",//换成自己的
}
AMapLoader.load({key: "xxxxxxxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.Geocoder","AMap.IndoorMap",'AMap.PlaceSearch','AMap.AutoComplete'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
}).then((AMap) => {new AMap.Map(this.$refs.allmap, {// 设置地图容器id// viewMode: "3D", // 是否为3D地图模式mapStyle: "amap://styles/darkblue",showIndoorMap: true,zoom: this.zoom || 11,resizeEnable: true,center: new AMap.LngLat(105.000, 38.000), // 初始化地图中心点位置})
}- 百度需要在html中引入
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak="></script>
二、经纬度坐标转成容器像素坐标
new AMap.LngLat(point.lng, point.lat) //高德
new BMap.Point(point.lng, point.lat) //百度
三、标记点
- 百度
let myIcon = new BMap.Icon(img, new BMap.Size(202, 120), {anchor: new BMap.Size(110, 65),
})
let marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker); //打点
- 高德
let myIcon = new AMap.Icon( {size: new AMap.Size(202, 120),image: img, //Icon 的图像imageOffset: new AMap.Pixel(-1, -1), //图像相对展示区域的偏移量，适于雪碧图等
})
const marker = new AMap.Marker({position: _point, //点标记的位置offset: new AMap.Pixel(-100, -60), //偏移量icon: myIcon, //添加 Icon 实例
})
map.add(marker)
四、跳转到最佳视角
- 百度数组是坐标点
const pointArr = [new BMap.Point(element.longitude, element.latitude)]
let center = this.map.getViewport(pointArr).center;
this.map.centerAndZoom(center, zoom);
- 高德数组里是marker对象
map.setFitView([ startMarker, endMarker, routeLine ])
五、高德、百度坐标系互相转换方法
//百度坐标转高德（传入经度、纬度）
export function bd2gd(bd_lng, bd_lat) {var X_PI = Math.PI * 3000.0 / 180.0;var x = bd_lng - 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 {lng: gg_lng, lat: gg_lat}
}
//高德坐标转百度（传入经度、纬度）
export function gd2bd(gg_lng, gg_lat) {var X_PI = Math.PI * 3000.0 / 180.0;var x = gg_lng, y = gg_lat;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 bd_lng = z * Math.cos(theta) + 0.0065;var bd_lat = z * Math.sin(theta) + 0.006;return {lat: bd_lat,lng: bd_lng};
}
六、感受
开始以为很麻烦毕竟经纬度不同啊，api不同啊，切换后感觉高德快了不少，整个过程也没有想的那么复杂（主要我们的页面地图功能都很基础）；
