1.用贵州省为例,代码粘贴在后面,主要做了两个功能,一个是只显示某个省的区域,另一个是进行地址的批量解析。
<!DOCTYPE html>
<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">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?
v=2.0&ak=你的key"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script src="addr/jquery-1.7.2.min.js"></script>
<script src="addr/pace.min.js"></script>
<script src="addr/jquery.qrcode.min.js"></script>
<script src="addr/address.js"></script>
<script type="text/javascript">
var baseurl = "http://localhost:8080";
var map = new BMap.Map("allmap");
//设置地图的中心点的坐标
var point = new BMap.Point(106.714476, 26.60403);
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point,8);
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//只显示某个省份的关键代码
var bdary = new BMap.Boundary();
bdary.get('贵州省', function(rs){//获取行政区域
map.clearOverlays();//清除地图覆盖物
//思路:利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层
//1.获取选中行政区划边框点的集合rs.boundaries[0]
var list =rs.boundaries;
var num="";
var max = list[0];
for (var i = 1; i < list.length; i++) {
if (list[i].length > max.length){
max = list[i];
}
}
var strs = new Array();
strs = max.split(";");
var ENWS = "";
for (var i=0;i<strs.length;i++) {
ENWS += strs[i] + ";"
}
//2.自定义外围边框点的集合
var E_JW = "170.672126, 39.623555;"; //东
var EN_JW = "170.672126, 81.291804;"; //东北角
var N_JW = "105.913641, 81.291804;"; //北
var NW_JW = "-169.604276, 81.291804;"; //西北角
var W_JW = "-169.604276, 38.244136;"; //西
var WS_JW = "-169.604276, -68.045308;"; //西南角
var S_JW = "114.15563, -68.045308;"; //南
var SE_JW = "170.672126, -68.045308 ;"; //东南角
//3.添加环形遮罩层
var ply1 = new BMap.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, {
strokeColor:"none",
strokeOpacity:0,
fillColor:"#a9b9fe",
strokeOpacity: 0.5,
fillOpacity:"1"
}); //建立多边形覆盖物
map.addOverlay(ply1);//遮罩物是半透明的,如果需要纯色可以多添加几层
//4. 给目标行政区划添加边框,其实就是给目标行政区划添加一个没有填充物的遮罩层
var ply = new BMap.Polygon(max, {strokeWeight:3,strokeColor:"#064fa0",fillColor:""});
map.addOverlay(ply);
map.setViewport(ply.getPath());//调整视野
});
var geoc = new BMap.Geocoder(); //地址解析器
var site ='';
//获取地址信息
map.addEventListener("click", function(e){
//清除地图上所有的覆盖物
map.clearOverlays();
//通过点击百度地图,可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
var pot = e.point;
geoc.getLocation(pot, function(rs){
//addressComponents对象可以获取到详细的地址信息
var addComp = rs.addressComponents;
// var site = addComp.province + ", " + addComp.city + ", " + addComp.district;
site = addComp.district;
$.ajax({
url:baseurl+"/xljk/ws/getOrgname",
async:false,
data:{"cname":site},
success:function(result){
var datas = result.result;
var adds= [];
for(var i =0;i<datas.length;i++){
adds.push(datas[i].orgname);
}
for(var index =0;index < adds.length;index++) {
var add = adds[index];
geocodeSearch(add);
}
function geocodeSearch(add){
geoc.getPoint(add, function(point){
if (point) {
var address = new BMap.Point(point.lng, point.lat);
addMarker(address,new BMap.Label(add,{offset:new BMap.Size(10,-10)}));
}
}, "贵阳市");
}
// 编写自定义函数,创建标注
function addMarker(point,label){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setLabel(label);
}
}});
});
});
</script>