1、行政区域显示+根据地址标点
注：本节代码为修改的他人的，在此进一步介绍原作者代码的使用方法，原文链接已附上。
以及济南市为例，标注位于济南中心的五个区的医院位置
效果显示图：
准备工作：首先需要在百度API上申请一个密钥（申请流程：1、打开官网（百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)）2、进入控制台-应用管理-我的应用-创建应用 3、起一个名称，应用类别是浏览器端，Referer白名单可填*，提交即可），还需要知道所要标点位置的地址信息，以及明确要绘制的行政区域名称。
代码如下：
<!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/api?v=2.0&ak=申请一个"></script>
<!-- 点聚合需引用 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
var boundary = ["济南市历城区","济南市历下区","济南市槐荫区","济南市天桥区","济南市市中区"];
var color = ["#FFD700","#FF83FA","#FF0000","#FF4500","#0087FF"];
var address =["历城区临港经济开发区温泉路8号", "济南市历城区孙唐路(济南市历城区唐王街道第二小学东南侧约250米)", "山东省济南市历城区彩石镇卫生院(051县道南)", "济南市历城区工业北路21号", "历城区旅游路13977号", "历城区工业北路王舍人北街1号", "天辰路666号", "济南市历下区天辰路联合财富广场南侧约30米", "高新区崇华路1111号附近", "历下区经十路9677号", "历下区龙奥北路1577号", "历城区华山珑城C区6号楼103", "历城区工业北路236号", "济南市历城区东风街道祝甸路35号", "历城区花园路1号", "济南市山东省济南市历下区花园路商圈工业南路72号", "山东省济南市历下区浆水泉路12-8号", "山东省济南市天桥区大桥工商所附近", "北园大街247号", "历下区历山路63-1号", "历下区解放路105号", "历下区文化东路73号", "济南市历下区经十路16369号", "历下区经十路16369号", "山东省济南市天桥区顺河高架路", "历下区大明湖路132号", "市中区共青团路76号", "历下区文化西路107号", "市中区经八路1号", "市中区经十路20127号", "市中区英雄山路134号", "英雄山路134号", "市中区二环南路1701号", "历城区仲宫镇宏福路2号", "市中区郎茂山路61号", "市中区济微路126号", "济泺路43号", "济南市天桥区师范路25号", "天桥区师范路50号", "山东省济南市天桥区无影山路25号", "济南市天桥区无影山中路11~12号", "山东省济南市槐荫区纬六路2号济南公共卫生大厦", "槐荫区匡山街道济齐路95号", "济南市槐荫区济齐路22号", "槐荫区经四路589号", "山东省济南市槐荫区段兴西路4号", "槐荫区经十路24297号", "槐荫区经十路28722号", "山东省济南市槐荫区经十西路与党杨路交汇处南行约350米", "槐荫区经十西路1266号", "桑新路与308国道交叉口西150米桑梓店工商所附近"];
//map.centerAndZoom(new BMap.Point(114.527, 38.071), 13); // 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom("济南", 9); // 初始化地图,第一个参数可以使用中心点坐标,也可以使用城市名称;第二个参数为地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
//map.setCurrentCity("北京"); // 百度注释(设置地图显示的城市 此项是必须设置的 ) 不设置也不影响地图显示,不知道具体作用
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
for (var i = 0; i < boundary.length; i++) {
getBoundary(boundary[i],color[i]); //行政区划覆盖遮罩
}
for (var j = 0; j < address.length; j++) {
getPoint(address[j]); //地图描点
}
//点聚合
/* var markers = [];
for (var i = 0; i < 10; i++) {
pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
markers.push(new BMap.Marker(pt));
}
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers}); */
//单击获取点击的经纬度
/* map.addEventListener("click",function(e){
alert(e.point.lng + "," + e.point.lat);
}); */
function getBoundary(area,color){
var bdary = new BMap.Boundary();
bdary.get(area, function(rs){ //获取行政区域
//map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeColor:"green",fillColor: color ,fillOpacity:"0.3",strokeOpacity:0.3,strokeWeight: 2}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
//map.setViewport(pointArray); //调整视野
});
}
// 将地址解析结果显示在地图上,并调整地图视野
function getPoint(address) {
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
myGeo.getPoint(address, function(point){
if (point) {
//map.centerAndZoom(point, 16);
var marker = new BMap.Marker(point);
map.addOverlay(marker); //描点
var opts = {
width : 280, // 信息窗口宽度
height: 150, // 信息窗口高度
title : "<span class='content'>详细信息</span>" , // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("<font class='content'>地址："+address+"<br/>坐标:"+point.lng+"," +point.lat+
"<br/><a href='javascript:void(0)' onclick='alert(\"啦啦啦!!!\")' style='font-size:18px;color:blue;text-decoration:underline;'>点击有惊喜！！！</a></font>"
,opts); //创建信息窗口对象
//鼠标点击事件
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
//map.centerAndZoom(point,14);
});
//鼠标移入事件
/* marker.addEventListener("mouseover", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
}); */
}else{
alert("您选择地址没有解析到结果!");
}
}, "济南市");
}
</script>代码使用方式：
新建一个txt文件，复制粘贴代码，首先在ak=处填上申请的AK，在var boundary处换上自己要绘制的区域，在var color里填上对应区域的颜色，颜色代码可以在网上搜到，在var address处填上自己需要标点的地址信息，在map.centerAndZoom处换上自己要找的地市名称，其余基本不用管。
修改后，文件另存为，名称加后缀.html，保存后直接打开即可。
方法缺点：由于用的是地址信息，部分点标的不够精确
代码原文链接：百度地图行政区划遮罩+描点+信息窗demo_Iws7的博客-CSDN博客
2、根据经纬度标点
如果不需要画出行政区域作为背景，只需标点，为更加精确，可以使用本节方法。
打开百度地图开放平台示例中心（地图JS API示例 | 百度地图开放平台 (baidu.com)），找到点覆盖物——添加点标记，如图。
该功能的使用步骤包括三个，第一是在“您的密钥”换上上一步申请的ak，第二步是在创建点标记处仿照案例添加点，只需要修稿var marker后的数值以及括号里的经纬度即可。第三步是在添加点标记处，仿照案例把需要展示的点写上即可。
如果要标记的点数量很多，则可以在python中用以下示例代码快速输出结果，然后复制粘贴到相应位置即可
Data={0:{'lng':1,'lat':1},1:{'lng':1,'lat':1},2:{'lng':1,'lat':1}} #数据格式
marker=[]
for i in range(len(Data)):
marker.append('var marker'+str(i+1)+'= new BMapGL.Marker(new BMapGL.Point('+str(Data[i]['lng'])+','+ str(Data[i]['lat'])+'));')
for i in range(len(Data)):
print(marker[i])
print('\n')
print('\n')
for i in range(len(Data)):
print('map.addOverlay(marker%d);'%(i+1))结果如图，复制过去就行，就是方法笨点。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
