使用百度地图api展示多个城市轮廓的例子

说明，本文章是参考了酸奶小妹的改写的，原文在 http://www.ui-love.com/baidumap/city/Boundary.html

有几个人问起多个县市轮廓的，分享一下。

多个县市轮廓的效果如这个url所示:

http://www.yyue.org/file/bound.html

注意，百度地图api 1.1才支持这个功能,在1.2中是不支持的。

方法

方法	描述
get(name, callback)	name: 查询省、直辖市、地级市、或县的名称 callback:执行查询后，数据返回到客户端的回调函数，数据以回调函数的参数形式返回。返回结果是一个boundaries数组，数据格式如下： arr[0] = "x1, y1; x2, y2; x3, y3; ..." arr[1] = "x1, y1; x2, y2; x3, y3; ..." arr[2] = "x1, y1; x2, y2; ..."

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>县市轮廓例子</title>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true">

</script>

<style type="text/css">

body{font-size:13px;margin:10px}

#container{width:800px;height:500px;border:1px solid gray}



</style>

</head>

<body>

<div id="container"></div>



<script type="text/javascript">

getBoundary("佛山","blue")

getBoundary("中山","green")

getBoundary("广州","red")





if (typeof console == "undefined"){

  window.console = {log: function(){}};

}



var map = new BMap.Map("container");



map.centerAndZoom(new BMap.Point(113.339845,23.128291), 9);

var stdMapCtrl = new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})

map.addControl(stdMapCtrl);

map.enableScrollWheelZoom();

map.enableContinuousZoom();



function getBoundary(name,color){       

    var bdary = new BMap.Boundary();

    bdary.get(name, function(rs){

        console.log(rs);

      

        var bounds;

        var maxNum = -1, maxPly;

   

        var count = rs.boundaries.length; 

        for(var i = 0; i < count; i++){

            var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 1, strokeColor: "#ff0000",FillOpacity:0});

			ply.setFillColor(color);

			ply.setFillOpacity("0.2");

            map.addOverlay(ply);  



            

            var arrPts = ply.getPoints();

			

            if(arrPts.length > maxNum){

                maxNum = arrPts.length;

                maxPly = ply;

            }

            

        }



        if(maxPly){

            map.setViewport(maxPly.getPoints());

        }

                

    });   

}



</script>

秒客网

使用百度地图api展示多个城市轮廓的例子

方法

相关文章