地图批量标点两种方法：1、需行政区域显示+根据地址标点 2、根据经纬度标点

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))

结果如图，复制过去就行，就是方法笨点。

地图批量标点两种方法：1、需行政区域显示+根据地址标点 2、根据经纬度标点相关推荐

通过计算机名访问电脑 win10,win10通过ip地址查找计算机名的两种方法｜win10怎样设置ip地址？...
win10通过ip地址查找计算机名的两种方法 win10通过ip地址查找计算机名的两种方法图文步骤一: 1.通过"开始"菜单,输入cmd,进入到类dos页面.(也可以通过快捷键: ...
vue-cli3.0引入高德地图3d效果两种方法+实例+填坑
前言: 因为项目需要引入高德地图的3d效果,找了很多资料,在这里记录下方法和实例组件 ***注意: 因为两个方法代码量都特别大,这里分2个页面详细说一下,方法一是链接出去专门说,最下面有更多资料,高德 ...
Linux中脚本实现倒计时【两种方法：算术法和显示法】
脚本目的: 调用脚本,实现倒计时,只给定需要计时的时间[总秒数] 题目例如:写一个脚本,可以实现任意秒数的倒计时. 思路解析: 1.倒计时有两部分:分钟和秒钟,所以我们需要对分钟和秒钟分别倒计时 2. ...
改变全局变量值得两种方法
方法一:指针法 #include<iostream> using namespace std; void change(int *a); void main() { int t; ...
mysql update 批量更新_mysql 批量更新的两种方法
本文介绍两种批量更新数据方法数据准备 create table account ( id int auto_increment primary key, balance int not null ) ...
AE 将地图导出为图片的两种方法
在ArcGIS的开发中,我们经常需要将当前地图打印(或是转出)到图片文件中.将Map或Layout中的图象转出有两种方法,一种为通过IActiveView的OutPut函数,另外一种是通过IExpor ...
ArcGIS Engine开发系列：将地图导出为图片的两种方法
转自:http://blog.sina.com.cn/s/blog_4c5f70df0100a0ti.html 在ArcGIS的开发中,我们经常需要将当前地图打印(或是转出)到图片文件中.将Map或L ...
dapper mysql 批量_MySQL数据库之c#mysql批量更新的两种方法
本文主要向大家介绍了MySQL数据库之c#mysql批量更新的两种方法 ,通过具体的内容向大家展现,希望对大家学习MySQL数据库有所帮助. 总体而言update 更新上传速度还是慢. 1: 简单的 ...
如何做电脑桌面应用_CAD批量转PDF？一分钟教会你CAD如何转PDF，两种方法任你选择！...
作为从事CAD设计的我,已经深深的了解到了CAD设计行业的辛苦.dwg格式的文件作为CAD文件格式常见的专业格式,它能够很好的帮助我们保存好绘制好的CAD图纸.现在几乎在很多领域都可以见到,有的时候会 ...

地图批量标点两种方法：1、需行政区域显示+根据地址标点 2、根据经纬度标点

地图批量标点两种方法：1、需行政区域显示+根据地址标点 2、根据经纬度标点相关推荐

最新文章

热门文章