由于公司不续费百度地图，所以切换高德。。。

一、注册

• 高德需要这样，先安装@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.15
    plugins: ["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不同啊，切换后感觉高德快了不少，整个过程也没有想的那么复杂（主要我们的页面地图功能都很基础）；