js使用高德地图api实现定位，行政区域划分，点击事件，只显示某个省市或区，海量点标记

没有翅膀却想飞向天空

已于 2022-10-19 16:31:47 修改

阅读量8.3k

点赞数 4

文章标签： javascript

于 2022-09-07 14:42:24 首次发布

本文链接：https://blog.csdn.net/qq_46258463/article/details/126744985

版权

这篇博客介绍了如何使用高德地图API在网页中实现地图初始化、定位功能以及行政区划查询。通过引入相关js文件并设置安全密钥，可以加载地图并进行定位。同时，详细展示了如何搜索特定行政区域（如徐汇区）并绘制其边界。当用户点击地图时，可以获取点击位置的经纬度，并进行逆地理编码获取详细地址。此外，还提供了根据地址查询经纬度的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现定位，行政区域划分，点击事件

效果：

需要引入的高德js：

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key="您申请的高德key"&plugin=AMap.Geocoder&plugin=AMap.DistrictSearch"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>

在Html头部写上以下代码，防止api使用不了报错，切记！！！

    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: '您申请的安全密钥',
        }
    </script>

js代码：

//初始化地图对象，加载地图
//此处的container是div的id
var map = new AMap.Map("container", {
    resizeEnable: true,
    // center: [116.397428, 39.90923],//地图中心点
    // zoom: 18 //地图显示的缩放级别
});
var geocoder = new AMap.Geocoder({
    // city: "010", //城市设为北京，默认：“全国”
    // radius: 1000 //范围，默认：500
});
var marker = new AMap.Marker();


var district = null;
var polygons = [];

// //行政区查询,这个地方我固定了徐汇区，可根据需求自己更改
function drawBounds() {
    //加载行政区划插件
    if (!district) {
        //实例化DistrictSearch
        var opts = {
            subdistrict: 0,   //获取边界不需要返回下级行政区
            extensions: 'all',  //返回行政区边界坐标组等具体信息
            level: 'district'  //查询行政级别为 市
        };
        district = new AMap.DistrictSearch(opts);
    }
    // district.setLevel(document.getElementById('level').value)
    district.setLevel('city')
    // district.search(document.getElementById('district').value, function(status, result) {
    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);//视口自适应
        for (let i = 0; i < polygons.length; i++) {
            polygons[i].on('click', (e) => {
                regeoCode(e.lnglat);
            })
        }
        //用setFitView()方法设置自适配合适视野后，发现实际展示效果有点小，
        //可以通过setZoom方法解决，或者写map.setZoom(map.getZoom() + 1)
        map.setZoom(12)
    });
}

drawBounds();

/*定位start*/
AMap.plugin('AMap.Geolocation', function() {
    var geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认:true
        timeout: 10000,           // 超过10秒后停止定位，默认：无穷大
        maximumAge: 0,            // 定位结果缓存0毫秒，默认：0
        convert: true,            // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: true,         // 显示定位按钮，默认：true
        buttonPosition:'RB',    //定位按钮的停靠位置
        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        showMarker: flase,         // 定位成功后在定位到的位置显示点标记，默认：true
        showCircle: flase,         // 定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: flase,      // 定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy:true       // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false

    });
    map.addControl(geolocation);
    geolocation.getCurrentPosition(function(status,result){
        if(status==='complete'){
            onComplete(result)
        }else{
            onError(result)
        }
    });
    AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
    AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
});



function onComplete(data) {
    regeoCode(data.position)
}
function onError(data) {
    // log.error('定位失败');
}
/*定位结束*/

//以下是将经纬度，地址回显，可根据自己需求修改
function regeoCode(lnglat) {
    map.add(marker);
    marker.setPosition(lnglat);
    $("#addressjd").val(lnglat.lng);
    $("#addresswd").val(lnglat.lat);
    geocoder.getAddress(lnglat, function (status, result) {
        if (status === 'complete' && result.regeocode) {
            var address = result.regeocode.formattedAddress;
            $("#address").val(address);
        } else {
            log.error('根据经纬度查询位置失败');
        }
    });
}

//根据地址查询经纬度
function geoCode(address) {
    geocoder.getLocation(address, function (status, result) {
        if (status === 'complete' && result.geocodes.length) {
            var lnglat = result.geocodes[0].location
            $("#addressjd").val(lnglat.lng);
            $("#addresswd").val(lnglat.lat);
            marker.setPosition(lnglat);
            map.add(marker);
            map.setFitView(marker);
        } else {
            log.error('根据地址查询位置失败');
        }
    });
}

$("#address").blur(function () {
    var address = $("#address").val()
    if (address !== "") {
        geoCode(address)
    }
})

//绑定点击事件
map.on('click', function (e) {
    regeoCode(e.lnglat);

})

注意：

zoom是不可以增加小数的，比如map.setZoom(map.getZoom() + 0.3)？最终的zoom会按四舍五入算出一个整数，即要么不变，要么+1
也就是说zoom值一般情况下只能是3-18的整数，除非在3D模式下，zoom可以设置为浮点数。

3D模式下设置zoom：

this.overviewMap = new AMap.Map('overview-map', {
     pitch: 5, // 地图俯仰角度，有效范围 0 度- 83 度
     viewMode: '3D', // 地图模式
     resizeEnable: true,
     center: [116.397428, 39.90923],//地图中心点
     zoom: 10
})

3D地图模式直接加上这两行配置即可，

pitch: 5, // 地图俯仰角度，有效范围 0 度- 83 度，不想要3D效果此处设置为0即可
viewMode: ‘3D’, // 地图模式

然后再map.setZoom(map.getZoom() + 0.3)，就会发现地图就会放大+0.3的效果。

实现只显示某个省市或区，海量点标记

效果

    var positions = [[121.45383, 31.158318], [121.410572, 31.174769], [121.449711, 31.127758]];
        var options = {
            subdistrict: 0,
            extensions: 'all',
            level: 'province'
        };
        var district = new AMap.DistrictSearch(options);
        //查询北京市区域
        district.search('徐汇', function (status, result) {
            var bounds = result.districtList[0]['boundaries'];
            var mask = [];
            for (var i = 0; i < bounds.length; i++) {
                mask.push([bounds[i]]);
            }
            //实例化地图
            var map = new AMap.Map('container', {
                mask: mask,
                zoom: 12,                //设置当前显示级别
                expandZoomRange: true,    //开启显示范围设置
                zooms: [7, 20],          //最小显示级别为7，最大显示级别为20
                center: [121.449145, 31.158531],//地图中心点
                viewMode: '3D',          //这里特别注意，设置为3D则其它地区不显示
                zoomEnable: true,        //是否可以缩放地图
                resizeEnable: true,
                mapStyle: 'amap://styles/darkblue', //设置地图的显示样式
            });
            //添加描边
            for (var i = 0; i < bounds.length; i += 1) {
                new AMap.Polyline({
                    path: bounds[i],
                    strokeColor: '#3078AC',
                    strokeWeight: 3,
                    map: map
                })
            }
            var markers = [];
            for (var i = 0, marker; i < positions.length; i++) {
                marker = new AMap.Marker({
                    map: map,
                    position: positions[i],
                    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                    offset: new AMap.Pixel(-13, -30)
                });
                markers.push(marker);
            }
        });