JS 与高德地图实现地点行政区边界展示功能的方法

在Web开发中，展示地点行政区边界是一项常见且实用的功能。借助JavaScript（JS）与高德地图的强大组合，我们能够轻松实现这一功能，为用户提供直观的地理信息展示。

需要在项目中引入高德地图的JavaScript API。可以通过在HTML文件的标签中添加脚本链接来完成，引入后即可使用其中丰富的地图功能和接口。

接下来，使用JS创建地图实例。通过以下代码可以初始化一个基本的地图：

var map = new AMap.Map('map-container', {
    center: [116.397428, 39.90923],
    zoom: 12
});

这段代码创建了一个地图实例，并将其显示在id为'map-container'的HTML元素中，同时设置了地图的中心坐标和缩放级别。

要展示行政区边界，需要使用高德地图的行政区查询服务。通过调用AMap.DistrictSearch类来实现。代码如下：

var districtSearch = new AMap.DistrictSearch({
    subdistrict: 1,
    extensions: 'all'
});
districtSearch.search('北京市', function(status, result) {
    if (status === 'complete' && result.info === 'OK') {
        var bounds = result.districtList[0].boundaries;
        for (var i = 0; i < bounds.length; i++) {
            var polygon = new AMap.Polygon({
                path: bounds[i],
                strokeColor: '#FF0000',
                fillColor: '#FF0000',
                fillOpacity: 0.3
            });
            map.add(polygon);
        }
    }
});

在这段代码中，首先创建了一个DistrictSearch实例，并设置了查询参数。然后调用search方法，传入要查询的行政区名称。当查询成功时，从结果中获取行政区的边界数据，并使用这些数据创建多边形对象，设置多边形的样式，最后将多边形添加到地图上，这样就实现了行政区边界的展示。

通过这种方式，利用JS与高德地图的结合，不仅可以展示单一行政区的边界，还能根据需求展示多个行政区的边界，为用户提供更加丰富和详细的地理信息。无论是在地理信息系统、旅游应用还是物流配送等领域，这一功能都具有重要的应用价值。