区域定位

使用DistrictExplorer实现根据位置获取所在地的行政区域信息。

源代码编辑器
复制
运行
还原
          <!-- 重点：districtExplorer.locatePosition -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/geo/DistrictExplorer/examples/locate.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/geo/DistrictExplorer/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>区域定位</title>
    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    
    #locTip {
        position: absolute;
        width: 100%;
        background: #000;
        z-index: 9999;
        text-align: center;
        line-height: 150%;
        color: #fff;
    }
    </style>
</head>

<body>
    <div id="locTip">点击地图进行区域定位</div>
    <div id="container"></div>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
    <script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        cursor: 'default',
        zoom: 4
    });

    //just some colors
    var colors = [
        "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
        "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
        "#651067", "#329262", "#5574a6", "#3b3eac"
    ];

    AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function(DistrictExplorer, $) {

        //创建一个实例
        var districtExplorer = new DistrictExplorer({
            map: map
        });

        //定位点Marker
        var locMarker = new AMap.Marker();

        function listenMouseEvents() {

            var isLocating = false;

            map.on('click', function(e) {

                if (isLocating) {
                    return;
                }

                isLocating = true;

                $('#locTip').html('定位中......');

                districtExplorer.locatePosition(e.lnglat, function(err, features) {

                    isLocating = false;

                    if (err) {
                        console.error(err);
                        return;
                    }

                    renderFeatures(features);

                    refreshLocTip(e.lnglat, features);

                    locMarker.setPosition(e.lnglat);
                    locMarker.setMap(map);
                }, {
                    levelLimit: 4
                });

            });
        }

        listenMouseEvents();

        function renderFeatures(features) {

            //清除已有的绘制内容
            districtExplorer.clearFeaturePolygons();

            if (!features.length) {
                renderCountry(false);
                return;
            }

            for (var i = 0, len = features.length; i < len; i++) {

                var strokeColor = colors[i % colors.length];
                var fillColor = strokeColor;

                districtExplorer.renderFeature(features[i], {
                    cursor: 'default',
                    bubble: true,
                    strokeColor: strokeColor, //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 1, //线宽
                    fillColor: fillColor, //填充色
                    fillOpacity: 0.35, //填充透明度
                });
            }
        }

        //更新位置头部的提示内容
        function refreshLocTip(lngLat, features) {

            var i, len = features.length,
                $node = $('#locTip');

            if (!len) {
                $node.html(lngLat.toString() + '：未知区域');
                return;
            }

            var routes = [];

            for (i = 0; i < len; i++) {

                routes.push('<span style="color:' + colors[i] + '">' + features[i].properties.name + '</span>');
            }

            $node.html(lngLat.toString() + '：' + routes.join(' &gt; '));
        }

        function renderCountry(setBounds) {

            districtExplorer.loadCountryNode(function(err, countryNode) {

                if (setBounds) {
                    map.setBounds(countryNode.getBounds());
                }

                districtExplorer.renderParentFeature(countryNode, {
                    cursor: 'default',
                    bubble: true,
                    strokeColor: 'black', //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 2, //线宽
                    fillColor: colors[0], //填充色
                    fillOpacity: 0.35, //填充透明度
                });
            });
        }

        renderCountry(true);
    });
    </script>
</body>

</html>
        
控制台
清空
示例
中心常见
问题智能
客服