百度地图切换城市，设置城市边界

最新推荐文章于 2024-04-30 11:54:56 发布

chuotangbang2061

最新推荐文章于 2024-04-30 11:54:56 发布

阅读量1.5k

点赞数 1

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/xiaohuai4869/blog/3061138

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
    <style>
        body, html {
            widows: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }
        #allmap {
            widows: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="allmap"></div>
</body>
<script type="text/javascript">
	var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 10);
getBoundary("北京市")
map.enableScrollWheelZoom();
map.enableInertialDragging();

map.enableContinuousZoom();

function getBoundary(name){
    var bdary = new BMap.Boundary();
    // var name = document.getElementById("districtName").value;
    bdary.get(name, function(rs){ //获取行政区域
        map.clearOverlays(); //清除地图覆盖物
        var ply = new BMap.Polygon(rs.boundaries[0]); //建立多边形覆盖物
        map.addOverlay(ply); //添加覆盖物
        map.setViewport(ply.getPath());    //调整视野
    })
}

map.addControl(new BMap.CityListControl({
    anchor: BMAP_ANCHOR_TOP_LEFT,
    offset: new BMap.Size(10, 20),
    // 切换城市成功响应事件
    onChangeSuccess: function (e) {
        getBoundary(e.city)
    }
}));
    
</script>
</html>

效果：

转载于:https://my.oschina.net/xiaohuai4869/blog/3061138

chuotangbang2061

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
百度地图切换城市，设置城市边界

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...
复制链接

扫一扫