console 命令行工具 X clear

console

let markerList = [
    //lng、lat分别代表经度、纬度值;
    { name: '河北机场管理集团有限公司', lnglat: '114.683846,38.275616' },
    { name: '石家庄机场加油站', lnglat: '114.66585,38.27951' },

    { name: '石家庄市惠康食品有限公司', lnglat: '114.67339,38.261517' },
    { name: '瑞丰包装', lnglat: '114.6554,38.258892' },
    { name: '老康饮品', lnglat: '114.624886,38.2542151' },


    { name: '镇政府', lnglat: '114.62391,38.22247' },
    { name: '蓝星净水机设备厂', lnglat: '114.62379,38.22219' },
    { name: '乐明格家具公司', lnglat: '114.62003,38.22247' },

    { name: '正定县职教中心', lnglat: '114.57554,38.1791' },
    { name: '中国石化石油分公司正定分公司', lnglat: '114.56017,38.174236' },
    { name: '正定县殡仪馆', lnglat: '114.57659,38.174152' },

    { name: '福牛搅拌站', lnglat: '114.58721,38.190495' },

    { name: '世德管业公司', lnglat: '114.58144,38.20393' },
    { name: '于家庄村委会', lnglat: '114.56805,38.206123' },
    { name: '左邻右舍小区', lnglat: '114.56657,38.202335' },
    { name: '左邻右舍小区', lnglat: '114.56658,38.202087' },
    { name: '废品回收站', lnglat: '114.5678,38.200153' },
    { name: '鑫源加油站', lnglat: '114.56766,38.20085' },
    { name: '子龙庄园', lnglat: '114.56897,38.202217' },
    { name: '子龙庄园', lnglat: '114.56856,38.202206' },
    { name: '纸箱厂', lnglat: '114.569664,38.204132' },

    { name: '天一蔬菜', lnglat: '114.5325,38.15366' },

    { name: '石家庄水上体育运动中心', lnglat: '114.554695,38.112015' },
];

// gps:GPS原始坐标；baidu：百度经纬度；mapbar：图吧经纬度；
const formatterType = 'gps';
if (formatterType !== "") {
    let orgPoint = markerList.map(item => {
        let lng = item.lnglat.split(",")[0];
        let lat = item.lnglat.split(",")[1];
        return new AMap.LngLat(lng, lat)
    })
    let resPoint = []
    AMap.convertFrom(orgPoint, formatterType, (info, res) => {
        resPoint = res.locations
        markerList.forEach((it, index) => {
            it.lnglat = resPoint[index];
        })
    })
    setTimeout(() => {
        addMarker(markerList);
    }, 2000);
} else {
    markerList.forEach(item => {
        let lng = item.lnglat.split(",")[0];
        let lat = item.lnglat.split(",")[1];
        let po = new AMap.LngLat(lng, lat);
        item.lnglat = po;
    })
    setTimeout(() => {
        addMarker(markerList);
    }, 2000);
}

//初始化地图对象，加载地图
var map = new AMap.Map("container", {
    resizeEnable: true,
    center: [114.683846, 38.275616],//地图中心点
    zoom: 13 //地图显示的缩放级别
});
var district = null;
var opts = {
    subdistrict: 0,   //获取边界不需要返回下级行政区
    extensions: 'all',  //返回行政区边界坐标组等具体信息
    level: 'district'  //查询行政级别为 市
};
district = new AMap.DistrictSearch(opts);
district.setLevel("district")
var polygons = [];
district.search("正定县", function (status, result) {
    map.remove(polygons)//清除上次结果
    polygons = [];
    var bounds = result.districtList[0].boundaries;
    if (bounds) {
        for (var i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            var polygon = new AMap.Polygon({
                strokeWeight: 1,
                path: bounds[i],
                fillOpacity: 0.4,
                fillColor: '#80d8ff',
                strokeColor: '#0091ea'
            });
            polygons.push(polygon);
        }
    }
    map.add(polygons)
    map.setFitView(polygons);//视口自适应
});



function addMarker(marList) {
    marList.forEach((item) => {
        let marker = new AMap.Marker({
            position: [item.lnglat.getLng(), item.lnglat.getLat()],
            offset: new AMap.Pixel(-13, -30)
        });
        marker.setLabel({
            offset: new AMap.Pixel(-10, -23),  //设置文本标注偏移量
            content: item.name, //设置文本标注内容
        });

        map.add(marker);
    })

}

<!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://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,
        body,
        #container {
            margin: 0;
            height: 100%;
        }

        .input-item-text {
            width: 7rem;
        }
    </style>
</head>

<body>
    <div class="toast toast-success" style="display: none;">
        <button id="clsBtn" class="btn btn-clear float-right"></button>
        <span id="successText">复制成功!</span>
    </div>
    <div id="container"></div>
    <!-- <div class="info">
        <div class="input-item">
            <div id="toCopy">
                <span class="input-item-text" style="width:8rem;">点击复制</span>
            </div>
            <input id='tipinput' type="text" />
            <div id="transferFun">
                <span class="input-item-text" style="width:8rem;">点击转换</span>
            </div>
        </div>
    </div> -->
<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: "",
  };
</script>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=&plugin=AMap.Marker,AMap.Pixel,AMap.DistrictSearch,AMap.convertFrom"></script>
    </head>

</html>

.info {
    top: 3rem !important;
}
.toast{
    position: absolute;
    top: 0;
    z-index: 6000;
}
#toCopy {
    cursor: pointer;
}