高德地图自定义点标记踩坑

先看一下要做的效果
如上图所示，箭头所指示的就是我们要进行的点标记，
先说一下我做的这个步骤
1.上图所指示的坐标当时是用墨卡托坐标，要将其转成高德地图坐标表示的经纬度的形式，才能在高德地图中表示出来所指示的地点。
墨卡尔托坐标表示形式：12738037.307083402,3562717.500125364
就是上面这个坐标进行相应的点标记。
首先我们要对当前坐标进行相应的转换，转变成我们想要的坐标，供我们在下面调用进行使用。
转换方法：

// 转换坐标
    MercatorWeblonLat () {
        const {position}=this.state
        //因为此时position是一个对象，因此我们要将position转换为数组，取出x坐标和y坐标
         let x =position.split(',')[0],
             y =position.split(',')[1];
         let lng = x / 20037508.34 * 180;
         let lat = y / 20037508.34 * 180;
         lat = 180 / Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180)) - Math.PI / 2);
         //此时的lng和lat分别就是对应x和y坐标
        console.log(x坐标:+lng)
        console.log(y坐标:+lat)
    }

在转换坐标完成之后
我们先实例化地图对象，在上面一篇文章中已经写到过，这里就直接略过，直接进行点标记的执行。

 // 渲染当前客户的详细地址
 //在坐标转换完成之后进行调用
    renderCustomerArea(lng,lat){
       // 在此处添加坐标就是点标记所指示的位置 
       let position = new AMap.LngLat(lng,lat);
       // 创建地图实例
       let map = new AMap.Map('container', {
           zoom:11,//级别
           //把当前坐标作为地图的中心点
           center: position,//中心点坐标
           //下面这两句着重作用是禁止对地图进行拖动和其他操作，固定地图。
           **zoomEnable:false,
           dragEnable: false,**
       });
       let marker = new AMap.Marker({
        icon:new AMap.Icon({            
            size: new AMap.Size(12, 16.5),  //图标大小
            //这个地方也要特别进行说明就是在进行自定义图标进行引入的时候要使用require进行自定义图标的引入
            image:require("@/asset/image/informationization/customer/position.png")
        }) ,  
        //这里position就是icon所在的位置上    
        position: position
    });
    marker.setMap(map);

这样就完成了自定义点的标记