百度地图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 显示区域边界及地名定位的更多相关文章

  1. 百度地图API显示多个标注点并添加百度样式检索窗口

    原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...

  2. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...

  3. 百度地图API显示多个标注点带百度样式信息检索窗口的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 百度地图API显示多个标注点带提示的代码 / 单个标注点带提示代码

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. 百度地图API显示多个标注点带检索框

    通过百度地图的api,可以在地图上显示多个标注点,并给所有的标注点实现了带检索功能的信息框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  6. 通过百度地图API显示当前位置在地图上(图标显示)--第三方开源--百度地图(二)

    1.下载百度地图的demo,下载地址:http://lbsyun.baidu.com/sdk/download?selected=mapsdk_basicmap,mapsdk_searchfuncti ...

  7. 百度地图api之----根据用户ip定位城市

    LocalCity 这个类是利用用户IP地址去百度数据库里查询得到IP所在的城市,用法如下: var objCity = new BMap.LocalCity(); objCity.get(funct ...

  8. HTML5地理定位,百度地图API,知识点熟悉

    推断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) {        alert('支持地理定位');   } e ...

  9. Qt开发北斗定位系统融合百度地图API及Qt程序打包发布

    Qt开发北斗定位系统融合百度地图API及Qt程序打包发布 1.上位机介绍 最近有个接了一个小型项目,内容很简单,就是解析北斗GPS的串口数据然后输出经纬度,但接过来觉得太简单,就发挥了主观能动性,增加 ...

随机推荐

  1. POM(project Object Model) Maven包管理依赖 pom.xml文件

    什么是POM POM全称为“Project Object Model”,意思是工程对象模型.Maven工程使用pom.xml来指定工程配置信息,和其他文本信息.该配置文件以xml为格式,使用xml语法 ...

  2. Golang OOP、继承、组合、接口

    http://www.cnblogs.com/jasonxuli/p/6836399.html   传统 OOP 概念   OOP(面向对象编程)是对真实世界的一种抽象思维方式,可以在更高的层次上对所 ...

  3. 导出Excel过程中遇到的问题java.lang.NoClassDefFoundError: org/apache/xmlbeans/XmlException

    尝试实现java导出功能时遇到如下报错: org.apache.jasper.JasperException: javax.servlet.ServletException: java.lang.No ...

  4. Nginx正向代理配置

    服务器端: server { resolver 8.8.8.8; resolver_timeout 5s; listen 0.0.0.0:8888; access_log /usr/local/ngi ...

  5. Day06 DOM4J&schema介绍&xPath

    day06总结 今日内容 XML解析之JAXP( SAX ) DOM4J Schema   三.XML解析器介绍   操作XML文档概述   1 如何操作XML文档 XML文档也是数据的一种,对数据的 ...

  6. Tdrag

    Tdrag属于拖拽类的一款插件,基于jquery而成,兼容1.4以上版本的jquery,兼容浏览器:chrome.firfox.IE7等以上主流浏览器 插件加载 <script type=&qu ...

  7. web项目读取classpath路径下面的文件

    首先分两大类按web容器分类 一种是普通的web项目,像用Tomcat容器,特点是压缩包随着容器的启动会解压缩成一个文件夹,项目访问的时候,实际是去访问文件夹,而不是jar或者war包. 这种的无论你 ...

  8. 鸟哥linux私房菜学习笔记,U盘安装centos5.3不能正常进入图形界面的问题

    前面说过自己成功引导了centos系统,现在进入启动界面,首次进入会进行相关设置,按照步骤一步一步完成,取消完光盘安装,点击下一步,就进入下面这个界面,没有登录框...没错!怎么蓝屏了,这可是linu ...

  9. CentOS6.9安装httpd并正确配置静态IP地址

    题目要求 在vmware中安装一台虚拟机,操作系统为centos6.9 ip地址为 192.168.56.11 要求: 1.xshell能够连接上此虚拟机 2.此虚拟机必须可以上网 3.使用yum安装 ...

  10. Selenium IDE脚本录制步骤简介

    录制脚本步骤: 1.打开Selenium IDE,输入需要录制脚本的地址,然后启动Firefox,输入selenium IDE需录制的地址,根据实际需求,做相关操作: 2.录制过程中,会发现做的相关操 ...