sadjv3_user/utils/webMap.js

//高德地图
import * as websocketUtils from 'utils/websocketUtils.js';



//创建高德地图
export function creatAMap(key){
  console.log('创建map对象');
  // websocketUtils.getLocaton((res) => {
    
  // })
  const map = new AMap.Map(key, {
    viewMode: '2D', //默认使用 2D 模式
    zoom: 11, //地图级别
    
    center: [116.397428, 39.90923], //地图中心点
  });
  // amapLocation();
  amapLocation(map);
  return map;
}

export function addMarker(map,pointMap,orderList,clickCellBack){
  //清空点位
  map.clearMap();
  Object.keys(pointMap).forEach(key => {
    let data = pointMap[key];
    let uData = ((orderList || []).find(x => x.userId == key) || {});
    if(data){
      let xy = data.split(',');
      let x = Number(xy[1]);
      let y = Number(xy[0]);
      let position = new AMap.LngLat(x,y);
      
      //创建 AMap.Icon 实例：
      // let icon = new AMap.Icon({
      //   size: new AMap.Size(25, 34), //图标尺寸
      //   image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png", //Icon 的图像
      //   imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量，适于雪碧图等
      //   imageSize: new AMap.Size(135, 40), //根据所设置的大小拉伸或压缩图片
      // });      
      
      let marker = new AMap.Marker({
        id: key,
        title: uData.artificerName,
        position: position,
        // 将 html 传给 content
            // <!img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png"/>
        content: `
          <div class="custom-content-marker">
            <div class="marker_border">
              <img src="${ uData.artificerImg?uData.artificerImg: '../../static/logo.png' }"/>
              <!--div>${ uData.artificerName }</div-->
              <div class="marker_foot"></div>
            </div>
          </div>
        `,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-13, -30)
      });
      map.add(marker);
      marker.on('click',(e) => {
        console.log('点击后！',e,uData)
        if(e.originEvent.type == 'touchend'){
          //弹出框
          clickCellBack?clickCellBack(e,uData):null;
        }
      })
    }
  });
}

export function amapLocation(map){
AMap.plugin('AMap.Geolocation', function() {
  var geolocation = new AMap.Geolocation({
    enableHighAccuracy: true,//是否使用高精度定位，默认:true
    timeout: 10000,          //超过10秒后停止定位，默认：5s
    position:'RB',    //定位按钮的停靠位置
    offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
    zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

  });
  map.addControl(geolocation);
  geolocation.getCurrentPosition(function(status,result){
    if(status=='complete'){
      //onComplete(result)
      console.log('定位成功,坐标为：',result.position,result);
    }else{
      //onError(result)
      console.error('定位失败','失败原因排查信息:'+result.message+'</br>浏览器返回信息：'+result.originMessage);
    }
  });
});
}

//解析定位结果
function onComplete(data) {
    document.getElementById('status').innerHTML='定位成功'
    var str = [];
    str.push('定位结果：' + data.position);
    str.push('定位类别：' + data.location_type);
    if(data.accuracy){
         str.push('精度：' + data.accuracy + ' 米');
    }//如为IP精确定位结果则没有精度信息
    str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
    document.getElementById('result').innerHTML = str.join('<br>');
}