懂js,地图的人来 帮忙下

JavaScript09

懂js,地图的人来 帮忙下,第1张

用百度地图,给你提供一个思路。

百度地图有个类叫覆盖物,你需要的是多边形覆盖物ploygon。然后你需要每个省或者市的坐标信息。

百度提供一个方法可以通过地名得到这个地名行政区域的坐标集合,具体的方法名你去百度地图api查。

百度地图覆盖物提供一个标签覆盖物Marker,可以用来显示文本信息。剩下的你自己摸索吧。

将下面代码复制到记事本,另存为HTML文件,用浏览器打开,输入你要获取的地区名称点击‘获取轮廓线’,只能获取 省 市 县 的轮廓,暂时还没有乡镇和村的。

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

<title>获取地区轮廓线</title>

</head>

<body>

<div id="container" style="width:100%height:500px"></div>

<input type="text" id="districtName" onFocus="this.select()"/>

<input type="button" onclick="getBoundary()" value="获取轮廓线"/>

<textarea id="Div1" style="width:100%height:200px"></textarea>

<script type="text/javascript">

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

map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5)

map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}))

map.enableScrollWheelZoom()

function getBoundary()

{

var bdary = new BMap.Boundary()

var name = document.getElementById("districtName").value

bdary.get(name, function(rs){ //获取行政区域

map.clearOverlays()//清除地图覆盖物

var count = rs.boundaries.length//行政区域的点有多少个

for(var i = 0i <counti++){

var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"})//建立多边形覆盖物

map.addOverlay(ply)//添加覆盖物

map.setViewport(ply.getPath())//调整视野

}

document.getElementById('Div1').innerText = rs.boundaries

//'{"type":"Feature","id":"0","properties":{"name":"'+name+'"},"geometry":{"type":"Polygon","coordinates":[[[' + String().replace('','],[') + ']]}}'

})

}

</script>

</body>

</html>