高德地图php计算两点距离,两点间距离-距离/面积计算-示例中心-JS API 示例 | 高德地图API...

本文介绍如何使用HTML和JavaScript在地图上创建可拖动的Marker,并通过AMap API实现实时计算两点之间的距离。地图上展示了两个Marker,当它们被拖动时,计算并更新显示的距离信息。
摘要由CSDN通过智能技术生成
两点间距离

html,body,#container{

height:100%;

}

可拖动Marker调整位置

//初始化地图对象,加载地图

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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值