百度地图JavaScript API开发叠加行政区划图

简介: 叠加显示上海效果图: body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}#l-m...

叠加显示上海效果图:
叠加显示效果

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=0Ea24345073256b9232eddc3e8284aca"></script>
<title>叠加行政区划图</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 7);
map.enableScrollWheelZoom();

function getBoundary(){       
    var bdary = new BMap.Boundary();
    bdary.get("上海", function(rs){       //获取行政区域
        map.clearOverlays();        //清除地图覆盖物       
        var count = rs.boundaries.length; //行政区域的点有多少个
        for(var i = 0; i < count; i++){
            var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
            map.addOverlay(ply);  //添加覆盖物
            map.setViewport(ply.getPath());    //调整视野         
        }                
    });   
}
function getBoundary2(){       
    var bdary = new BMap.Boundary();
    bdary.get("武汉", function(rs){       //获取行政区域
        map.clearOverlays();        //清除地图覆盖物       
        var count = rs.boundaries.length; //行政区域的点有多少个
        for(var i = 0; i < count; i++){
            var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "red"}); //建立多边形覆盖物
            map.addOverlay(ply);  //添加覆盖物
            map.setViewport(ply.getPath());    //调整视野         
        }                
    });   
}

setTimeout(function(){
    getBoundary();
    getBoundary2();
}, 1500);
</script>

希望以上分享对各位朋友有些帮助,谢谢!
更多关注付义方技术博客:http://blog.csdn.net/fuyifang
或者直接用手机扫描二维码查看更多博文:
付义方CSDN博客二维码

目录
相关文章
|
9天前
|
Web App开发 缓存 JavaScript
深入浅出Node.js后端开发
【9月更文挑战第26天】本文将引导你了解Node.js的基本原理,并通过实际案例展示如何在后端开发中应用它。我们将从Node.js的核心概念讲起,逐步深入到构建一个完整的后端服务,最后探讨如何优化你的Node.js应用。准备好让你的开发技能更上一层楼了吗?让我们一起潜入Node.js的世界!
|
12天前
|
JavaScript 前端开发 API
深入浅出Node.js后端开发
【9月更文挑战第23天】在这篇文章中,我们将探索Node.js的世界,了解它如何改变后端开发的面貌。通过实际案例和代码示例,我们不仅学习Node.js的核心概念,还会深入探讨它的高级特性,如异步编程、事件驱动模型以及微服务架构的应用。无论你是初学者还是有经验的开发者,这篇文章都将为你提供新的视角和实用技能,帮助你构建更高效、可扩展的后端系统。
44 19
|
10天前
|
JavaScript 开发者
深入理解Node.js事件循环及其在后端开发中的应用
【8月更文挑战第57天】本文将带你走进Node.js的事件循环机制,通过浅显易懂的语言和实例代码,揭示其背后的工作原理。我们将一起探索如何高效利用事件循环进行异步编程,提升后端应用的性能和响应速度。无论你是Node.js新手还是有一定经验的开发者,这篇文章都能给你带来新的启发和思考。
|
8天前
|
Web App开发 JavaScript 前端开发
探索现代JavaScript开发:ECMAScript提案的未来
JavaScript是最受欢迎的编程语言之一,其发展迅速。ECMAScript(JS的标准化版本)的提案和更新为其带来了诸多新特性和改进。本文将介绍值得关注的ECMAScript提案,如可选链、空值合并运算符、逻辑赋值运算符、类字段和顶级Await,并展示如何利用这些新特性提升开发效率和代码质量。通过关注TC39提案流程、使用Babel和TypeScript等工具,开发者可以提前体验并利用这些新特性。随着JavaScript的不断进步,未来将有更多令人期待的功能加入。
|
10天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第25天】本文将带你了解Node.js的基本概念和核心优势,同时提供一些实际的代码示例来加深理解。无论你是初学者还是有一定经验的开发者,都能通过本文获得有价值的信息和技巧。让我们一起探索Node.js的世界吧!
|
17天前
|
JavaScript 前端开发 API
JavaScript 验证 API
JavaScript 验证 API
18 2
|
20天前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【9月更文挑战第15天】在数字化浪潮中,Node.js作为一颗耀眼的星辰,为后端开发领域注入了活力与创新。本文将带你领略Node.js的魅力所在,探索其架构设计、性能优化及实战应用,让你在轻松愉快的氛围中掌握Node.js后端开发的精髓。
|
24天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第11天】本文将带你走进Node.js的世界,了解其背后的运行机制和实际应用。我们将从基础概念出发,逐步深入到实战应用,最后通过代码示例巩固学习成果。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
|
22天前
|
JavaScript 前端开发 API
深入浅出Node.js后端开发
【9月更文挑战第13天】本文将带你进入Node.js的世界,从基础概念到实际案例,深入浅出地探讨如何利用Node.js进行后端开发。通过本文的学习,你将了解Node.js的工作原理、核心模块、以及如何构建一个简单的Web应用。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
24天前
|
Web App开发 JavaScript NoSQL
深入浅出Node.js后端开发
在数字化时代的浪潮中,后端开发作为技术支柱之一,承载着数据处理和业务逻辑实现的重要任务。本文将通过浅显易懂的方式,带你走进Node.js的世界,从基础概念到实战应用,逐步揭开后端开发的神秘面纱。无论你是编程新手还是希望扩展技术栈的开发者,这篇文章都将为你提供有价值的指导和启示。让我们一起探索如何在不断变化的技术环境中,保持初心,寻找属于自己的方向,并成为希望在世界上看到的改变。
32 1
下一篇
无影云桌面