前端研发高德地图,如何根据经纬度获取地点名称和两点之间的距离?

222 阅读1分钟

地理编码与逆地理编码 根据经纬度获取地址 引入插件,此示例采用异步引入,更多引入方式 lbs.amap.com/api/javascr…

AMap.plugin("AMap.Geocoder", function () {
  var geocoder = new AMap.Geocoder({
    city: "010", // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
  });

  var lnglat = [116.396574, 39.992706];

  geocoder.getAddress(lnglat, function (status, result) {
    if (status === "complete" && result.info === "OK") {
      // result为对应的地理位置详细信息
      console.log(result);
    }
  });
});
  1. 地图的单击事件:
// 初始化地图const map = new AMap.Map('container',{});
map.on('click', () => {
 console.log('触发地图鼠标左键单击事件');// 可以拿到经纬度
});

属性: 事件属性

  1. 地址获取。拿到经纬度后可通过逆地理编码拿到地址,方法名getAddress。参考文档:地理编码与逆地理编码-服务插件和工具-进阶教程-地图 JS API 2.0 | 高德地图API
AMap.plugin("AMap.Geocoder", function () {
  var geocoder = new AMap.Geocoder({
    city: "010", // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
  });

  var lnglat = [116.396574, 39.992706];

  geocoder.getAddress(lnglat, function (status, result) {
    if (status === "complete" && result.info === "OK") {
      // result为对应的地理位置详细信息
      console.log(result);
    }
  });
});
  1. 两点之间的距离计算,拿到两点经纬度即可。 核心代码: var distance = Math.round(p1.distance(p2)); 高德的示例是这样的: 参考手册-地图 JS API 2.0 | 高德地图API 距离计算
   //初始化地图对象,加载地图
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 13
    });
    var m1 = new AMap.Marker({
        map: map,
        draggable:true,
        position: new AMap.LngLat(116.368904, 39.923423)
    });
    var m2 = new AMap.Marker({
        map: map,
        draggable:true,
        position:new AMap.LngLat(116.387271, 39.922501)
    });
    map.setFitView();
    
    var line = new AMap.Polyline({
      	strokeColor:'#80d8ff',
      	isOutline:true,
      	outlineColor:'white'
    });
    line.setMap(map);
    var text = new AMap.Text({
      	text:'',
      	style:{'background-color':'#29b6f6',
				'border-color':'#e1f5fe',
				'font-size':'12px'}
    });
    text.setMap(map)
    function computeDis(){
        var p1 = m1.getPosition();
        var p2 = m2.getPosition();
        var textPos = p1.divideBy(2).add(p2.divideBy(2));
        var distance = Math.round(p1.distance(p2));
        var path = [p1,p2];
        line.setPath(path);
        text.setText('两点相距'+distance+'米')
        text.setPosition(textPos)
    }
    computeDis();
    m1.on('dragging', computeDis)
    m2.on('dragging', computeDis)