百度地图API 显示区域边界及地名定位
百度地图API 显示区域边界及地名定位
这个定位一共用了两个方法组成
一个是定位绘制区域边界线,另一个是地名定位
原理:
当用户输入省、市、县、区这种大地名时,我们要定位用户输入的这个位置,并显示轮廓,即调用getBoundary方法;
当用户输入乡,街道,某个学校这样的小地名时,这是由于区域太小,不需要对这片区域描边时,我们再调用dw方法
<div id="l-map"></div>
<div class="layout">
<input id="value" value="青山湖区长春村" type="text">
<input type="submit" onclick="pd()" value="定位">
</div>
//初始化地图
var value='';var map = new BMap.Map("l-map");
map.centerAndZoom('北京市',10);
map.enableScrollWheelZoom();
//定位区域,小地名,使用本地检索方法
var dw=function(){
//value=document.getElementById('value').value;
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
}); local.setMarkersSetCallback(function(pois){
map.clearOverlays();//清除所有覆盖物后,在叠加第一个点
var marker = new BMap.Marker(pois[0].point);
map.addOverlay(marker);
}) local.search(value);
map.clearOverlays(); }
//获取边界
function getBoundary(){//获取边界
var bdary = new BMap.Boundary();
bdary.get(value, function(rs){ //获取行政区域
map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
for(var i = 0; i < count; i++){
var ply = new BMap.Polygon(rs.boundaries[i], {
strokeWeight: 1,
strokeColor: "#ff0000"
}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
map.setViewport(ply.getPath()); //调整视野
}
});
}
//正则表达式,满足条件后调用
var patter=/['省'|'市'|'区'|'县']$/;
var pd=function(){
value=document.getElementById('value').value;
if(patter.test(value)==true){//关键字结尾是省市县区就调用下面方法
getBoundary();
if(/社区|小区$/.test(value)==true){//因为区后面结尾,会有小区和社区,即做了一个字方法
dw();
}
}else{//关键字结尾没有省市县区结尾就调用此方法
dw();
}
}
百度地图API 显示区域边界及地名定位的更多相关文章
- 百度地图API显示多个标注点并添加百度样式检索窗口
原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...
- 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法
原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...
- 百度地图API显示多个标注点带百度样式信息检索窗口的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 百度地图API显示多个标注点带提示的代码 / 单个标注点带提示代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 百度地图API显示多个标注点带检索框
通过百度地图的api,可以在地图上显示多个标注点,并给所有的标注点实现了带检索功能的信息框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- 通过百度地图API显示当前位置在地图上(图标显示)--第三方开源--百度地图(二)
1.下载百度地图的demo,下载地址:http://lbsyun.baidu.com/sdk/download?selected=mapsdk_basicmap,mapsdk_searchfuncti ...
- 百度地图api之----根据用户ip定位城市
LocalCity 这个类是利用用户IP地址去百度数据库里查询得到IP所在的城市,用法如下: var objCity = new BMap.LocalCity(); objCity.get(funct ...
- HTML5地理定位,百度地图API,知识点熟悉
推断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位 if (navigator.geolocation) { alert('支持地理定位'); } e ...
- Qt开发北斗定位系统融合百度地图API及Qt程序打包发布
Qt开发北斗定位系统融合百度地图API及Qt程序打包发布 1.上位机介绍 最近有个接了一个小型项目,内容很简单,就是解析北斗GPS的串口数据然后输出经纬度,但接过来觉得太简单,就发挥了主观能动性,增加 ...
随机推荐
- C#操作word之插入图片
假如我们导出一份简历到word文档,那势必可能要同时导出我们包含的简历,下面就来试一下如何和通过C#代码,将图片插入到word文档中. 为了简便起见,就简单一点.类似下面这样的 姓名 张三 照片 ...
- Systemd unit generators unit
systemd.generator(7) - Linux manual page http://man7.org/linux/man-pages/man7/systemd.generator.7.ht ...
- mongdb ---shard
http://blog.fens.me/mongodb-shard/ https://segmentfault.com/a/1190000004263332 1. 和用户管理相关的操作基本都要在adm ...
- Doing Homework---hdu1074(状态压缩&&记忆化搜索)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1074 有n(n<=15)门课需要做作业,每门课所需时间是used_time以及每门课作业上交的最 ...
- centos DNS服务搭建 DNS原理 使用bind搭建DNS服务器 配置DNS转发 配置主从 安装dig工具 DHCP dhclient 各种域名解析记录 mydns DNS动态更新 第三十节课
centos DNS服务搭建 DNS原理 使用bind搭建DNS服务器 配置DNS转发 配置主从 安装dig工具 DHCP dhclient 各种域名解析记录 mydns DNS动态更 ...
- centos tomcat/resin安装配置 卸载系统自带的java tomcat安装配置 安装JDK resin安装配置 第二十八节课
centos tomcat/resin安装配置 卸载系统自带的java tomcat安装配置 安装JDK resin安装配置 第二十八节课 tomcat和java都不需要编译 tom ...
- OpenS-CAD学习(1)
1.OpenS-CAD是一个不错的小巧的开源程序,以图层方式组织图形,可以绘制基本的线段.弧段.圆,可以进行节点对象捕捉,可以选择几何对象.对图幅进行平移.放大.缩小.可以将结果序列化保存为xml格式 ...
- docker镜像文件导入与导出,支持批量
工作中经常需要拉取一些国外的镜像,但是网络限制等原因在公司拉取很慢,所以我习惯用亚马逊服务器拉取镜像,导出后下载到本地再导入开发环境 1. 查看镜像id sudo docker images REPO ...
- 解读webpack的bundle.js
可能就是好奇心略重了,读了一下webpack打包后的bundle.js的代码,复杂的模块可能读不懂,但简单的hello world模块我还是能看懂的.没什么目的,就是想通过几个简单的模块,一条简单的w ...
- 6.3 Controllers -- Managing Dependencies Between Controllers
1. 有时候,特别是当嵌套资源的时候,我们需要两个controllers之间的某种连接.让我们拿这个router当做例子: app/router.js var Router = Ember.Route ...