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

叠加显示上海效果图:

<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
或者直接用手机扫描二维码查看更多博文:

时间: 2024-10-28 22:36:25

百度地图JavaScript API开发叠加行政区划图的相关文章

高德地图JavaScript API开发研究

原文:高德地图JavaScript API开发研究 高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种API接口向地图添加内容,创建功能丰富.交互性强的地图应用.高德地图JavaScript API 提供了大量的实用工具和富有特色的插件功能,并提供了搜索和路线规划等服务. 1.首先 2.然后 3.最后就是看官方文档开发 高德地图API使用介绍:http://lbs.amap.com/api/javascript-api/guide-2/map_

百度地图JavaScript API经纬度查询-MAP

百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size="20" name="keyword" id="keyword" /> <input type="submit" value="提交" onclick="MblogDotccMap(documen

百度地图JavaScript API本地搜索的结果面板

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"&

百度地图JavaScript开发入门教程

        自从openGPS.cn小编在2011年的一个WEB项目中用到了百度地图做售楼数量分布显示功能之后,就一发不可收拾,在位置服务的领域一路走了5年之久.今天难得时间充裕,给WEB开发者分享一点自己的经验,希望能够给到新接触百度地图JavaScript开发的朋友们一些帮助.         百度地图JavaScript开发第一步,得会看资料.很多新手,是因为连基本的页面怎么打开都不知道,重度依赖搜索引擎去搜出来百度地图开发官方站点,从而记不住操作过程,回头却找不到用过的页面,不会操作

最全面的百度地图JavaScript离线版开发_javascript技巧

项目要求web版百度地图要离线开发.这里总结下自己的开发过程和经验.  大概需求是:每辆车上安装有公司接收机,会实时反馈车辆的坐标.速度.转向等信息,接收到各车辆信息后在百度地图上实时画出车辆位置.作业点不一定都有网络,所以要求离线开发.  此过程主要有三个技术点:  1. 如何获取离线的API  2. 如何获取离线瓦片图  3. 如何在离线状态下将WGS坐标转换成百度地图坐标  解决问题过程:  1. 既然百度地图官方不支持离线地图,那么我们需要想办法把在线的代码改成离线的代码. 这里可以参考

百度地图推API打造开放平台

日前,全球最大中文搜索引擎百度旗下产品--百度地图(ditu.baidu.com)正式对外宣布开放API(应用程序接口),通过JavaScript将百度地图嵌入到网页应用程序接口,使网站能创建功能全面的地图应用程序. 这意味着300万中文网站将有可能通过二次开发,为他们的用户提供更为准确详实.基于地理位置的生活信息服务.分析认为,依赖百度强势的品牌和技术资源支持,此次地图API开放将影响亿万网民的在线生活和信息获取方式,并带动本地化互联网应用浪潮的到来. 推动网络地图应用生态圈成熟 互联网的普及

android 导航-求一份android百度地图gps导航开发代码(带有详细代码)

问题描述 求一份android百度地图gps导航开发代码(带有详细代码) 各位大神,给一份android百度地图gps导航开发代码,带有详细讲解,如果有视频就更好了,.有没有?有没有?有没有?跪求-- 解决方案 以前回答过类似的问题,姐姐毫无保留地给了代码,题主拿到代码就高高兴兴蹦蹦跳跳地跑啦.所以除非lz有诚意先采纳了,否则姐姐一般不会先给出代码了. 解决方案二: 百度API里面不是有Demo么

百度地图二次开发,如何获取指定范围的公交站

问题描述 百度地图二次开发,如何获取指定范围的公交站 解决方案 你这样问让别人怎么回答?又不是都有百度地图的api,原理性的东西大家都懂,就是不知道怎么实现

百度地图api-JAVA web开发根据地址来显示百度地图

问题描述 JAVA web开发根据地址来显示百度地图 众所周知调用百度地图需要经纬度. 可否就根据给出得具体地址,来显示百度地图. 或者根据地址查出经纬度,再用经纬度来显示百度地图? 解决方案 地址和 经纬度可以相互查找的.具体请上网搜索百度地图的api