点是否在线上

使用 AMap.GeometryUtil.isPointOnSegment 判断点是否在线上。

源代码编辑器

复制

运行

还原

          <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>点线关系</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
    <style>
      html,body,#container{
        height: 100%
      }
    </style>
</head>
<body>
<div id="container"></div>
<div class='info'>拖动Marker可调整位置</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript">
    //初始化地图对象，加载地图
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 13
    });
    
    // 创建折线
    var path = [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
        [116.398258, 39.904600]
    ]
    var polyline = new AMap.Polyline({
        map: map,
        path: path,
        strokeColor:'#80d8ff',
        strokeWeight: 5
    });

    // 创建marker
    var marker = new AMap.Marker({
        map: map,
        draggable:true,
        position: [116.377904, 39.915423]
    });

    // 判断点线关系
    function pointOnSegment(){
        var pos = marker.getPosition();
        // mp = getResolution() 获取指定位置的地图分辨率，单位：米/像素
        var mp = map.getResolution();
        // m 为Polyline宽度的米数
        var m = 5 * mp;
        // 判断 marker 是否在线段上，最后一个参数为 m米 的误差
        var inLine = AMap.GeometryUtil.isPointOnSegment(pos, path[0], path[1],m);
        var text = '点不在线上';
        if(inLine){
            text = '点在线上';
        }
        marker.setLabel({
            offset: new AMap.Pixel(20, 20),
            content: text
        });

    }
    
    map.setFitView();
    pointOnSegment();
    marker.on('dragging',pointOnSegment)

</script>
</body>
</html>
        

控制台

清空

示例
中心常见
问题智能
客服