chenJinxu
/
TelpoH5FrontendWeb

<!doctype html>
<html lang="">
<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>高德地图demo</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=6e4a6c39ea6d18b8dd3151baa3a7c0d5"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
      html,body,#container{
        height: 100%
      }
      .info {
          height: 100px;
          width: 250px;
          z-index: 9999;
          position: absolute;
          top: 20px;
          left: 20%;
          background-color: wheat;
          text-align: center;
      }
    </style>
</head>
<body>
<div id="container"></div>
<div class='info'>
    <p>拖动marker可调整位置</p>
    <input type="text" id="text"/>
</div>
<script script type="text/javascript">

    /* var textBox = new AMap.Text({
        map: map,
        position: new AMap.LngLat(116.40109,39.919728),
        offset: new AMap.Pixel(-20, -40),
        style:{
            'background-color':'yellow',
            'border':'solid 1px #0088ff',
            'padding':'10px 20px'
        }
    }) */
    // 获取url的参数
    function getQueryString() {
        var url = window.location.hash;
        console.log(url); //获取url中"?"符后的字串
        let theRequest = new Object();
        if (url.indexOf("?") != -1) {
            let str = url.substr(8);
            console.log("str", str);
            strs = str.split("&");
            for(let i = 0; i < strs.length; i ++) {
                theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
    var params = getQueryString();
    console.log(params.polygon);
    var polyLnglAtList = params.polygon.split(';').map(item => {
        return item.split(',');
    });
    var radius = Number(params.radius);
    console.log("radius", radius);
    var center = params.center.split(',');
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 13,
        center: center
    });
    console.log("polyLnglAtList", polyLnglAtList);
    var marker = new AMap.Marker({
        map: map,
        draggable:true,
        position: center
    });
    function createPoly() {
        // 创建地图
        // 判断是多边形还是圆形 数组length为1 是圆形
        if (polyLnglAtList.length === 1) {
            // 创建点
            var polygon = new AMap.Circle({
                center: center,
                radius: radius, //半径
                borderWeight: 3,
                strokeColor: "red",
                strokeWeight: 6,
                strokeOpacity: 0.5,
                fillOpacity: 0.4,
                strokeStyle: 'dashed',
                strokeDasharray: [10, 10],
                // 线样式还支持 'dashed'
                fillColor: 'green',
                zIndex: 50,
            });
            map.add(polygon)
            return polygon
        } else {
            // 否则是多边形
            var polygon = new AMap.Polygon({
                map: map,
                fillOpacity: 0.4,
                path: polyLnglAtList
            });
            return polygon
        }
    };
    // 绑定拖拽事件
    function compute() {
        var point = marker.getPosition();
        console.log("当前坐标点::", point);
        /* var isPointInRing = AMap.GeometryUtil.isPointInRing(point,polyLnglAtList); */
        var newPolygon = createPoly();
        console.log("newPolygon", newPolygon);
        var isPointInRing = newPolygon.contains(point);
        marker.setLabel({
            content: isPointInRing ? '在内部'+ point : '在外部' + point,
            offset:new AMap.Pixel(20,0)
        });
        // 双向绑定
        var input = document.querySelector("#text");
        var data = {};
        Object.defineProperty(data, "name", {
        configurable: true,
        get: function(){
            return input.value
        },
        set: function(newValue){
            //this.value = newValue;
            input.value = newValue;
        }
        })
        data.name = point.toString();
        input.onchange = function(){
        data.name = data.name;
        };
        let divBox = document.createElement('span');
        divBox.innerHTML = isPointInRing;
        divBox.className = 'fence';
        document.body.appendChild(divBox);
        console.log("该点是否在围栏内::", isPointInRing);
    }
    createPoly();
    compute();
    marker.on('dragging',compute)
    map.setFitView();
</script>
<div id="gaode"></div>
</body>
</html>