需求:

需要在JSP界面上引用百度地图,文本框中输入地址之后,自动拿到在百度地图上的经纬度

解决步骤:

1、引入百度地图api:

head中进行引用<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

1.3以上版本需要key,有点麻烦

2、html body内部定义容器来放置地图:

<div id="container" style="position:absolute;margin-top:30px;width:400px;height:400px;overflow:hidden;"></div>

3、定义触发来源:

假设有个文本框,输入字段之后,文本框失去焦点则进行查询

<input type="text" name="washaddress" id="washaddress" onblur="search()">

4、初始化地图:

在</html>标签之前定义,保证能找到要显示的容器:

var map=new BMap.Map("container");

map.centerAndZoom("上海",12);//定义默认显示中心区域和显示比例

map.enableScrollWheelZoom();//打开滚轮缩放功能

map.enableContinuousZoom();//打开拖动功能

var localsearch=new BMap.LocalSearch(map);//定义本地搜索变量

localsearch.enableAutoViewport();

5、定义搜索方法:

function search(){

map.clearOverlays();//清除之前地图的标记

var keyword=document.getElementById("washaddress").value;//拿到搜索关键字

localsearch.setSearchCompleteCallback(function (searchresult){//定义搜索完成回调方法

var poi=searchresult.getPoi(0);//拿到搜索结果的点,备注:当前只获取了搜索的第一个,其实搜索结果有很多个,这里忽略处理!

document.getElementById("longitude").value = poi.point.lng;//拿到点的经度
document.getElementById("latitude").value = poi.point.lat;//拿到点的纬度

map.centerAndZoom(poi.point, 13);//将地图中心显示为搜索的店

var marker = new BMap.Marker(new BMap.Point(poi.point.lng,poi.point.lat));//制作新的地图标记
map.addOverlay(marker);//显示标记

});

localsearch.search(keyword);//search进行检索

}

完成需求,成功根据text中的内容拿到坐标

JSP界面引用百度地图获取坐标的更多相关文章

  1. 百度地图 layer弹出地图 获取坐标

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise

    上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...

  3. 如何获取google地图、baidu百度地图的坐标

    google:打开google地图-->查找目的地-->右键:此位置居中-->地址栏键入javascript:void(prompt('',gApplication.getMap() ...

  4. django-admin引用百度地图

    实现的功能有,某个地点对应的经纬度自动填上,如果有经纬度的话,自动显示对应经纬度的地点,密匙在去百度地图引用搜索 <script type="text/javascript" ...

  5. iOS开发之引用百度地图SDK(一)-----------SDK开发指南

    (void)viewWillAppear:(BOOL)animated { [_mapView viewWillAppear]; _mapView.delegate = self; // 此处记得不用 ...

  6. Xamarin.Android 使用百度地图获取定位信息

    最近做一个项目,web端使用百度地图,PDA使用手持机自带的GPS定位系统获取经纬度,然后再百度地图上显示该经纬度会有一定距离的差异,这里就像可乐的瓶子拧上雪碧的盖子,能拧的上却不美观.所以为了数据的 ...

  7. vue 项目中引用百度地图

    新建map.js export const BaiduMap = { init: function() { const BMapURL = 'https://api.map.baidu.com/api ...

  8. ionic基于GPS定位并通过百度地图获取定位详细信息

    相信所有的前端攻城狮都会碰到移动端App.里面获取用户定位信息. 那么问题来了,怎么获取用户的定位信息(经纬度)呢. 当然方法有很多,通过百度地图API 以及 高德地图 API都是可以的.但是两个获取 ...

  9. RaceWeb介绍(7):由500强公司数据高速生成百度地图——生成坐标字段及坐标数据

    接上篇. 一.生成X坐标.Y坐标两个字段. 我们须要为每一个公司建立X坐标和Y坐标字段,用来保存XY坐标. 既然为了突出"快",这一步就有程序来完毕吧. 右键单击"世界5 ...

随机推荐

  1. 了解JSON Web令牌(JWT)

    JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案.今天给大家介绍JWT的原理和用法. 1.跨域身份验证 Internet服务无法与用户身份验证分开.一般过程如下. 1.用户向服 ...

  2. 【记录】STS设置maven远程仓库,加快下载jar包

    在STS中windows->preferences->maven->user settings 修改user settings里setting.xml配置文件 <?xml ve ...

  3. Bata冲刺第三天

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cnblo ...

  4. Java集合类里面最基本的接口

    Collection:代表一组对象,每一个对象都是它的子元素. Set:不包含重复元素的Collection. List:有顺序的Collection,并且可以包含重复元素. Map:可以把键(key ...

  5. Git中.gitignore文件不起作用

    Git中.gitignore文件不起作用的解决以及Git中的忽略规则介绍   在Studio里使用Git管理代码的过程中,可以修改.gitignore文件中的标示的方法来忽略开发者想忽略掉的文件或目录 ...

  6. Windows7有“系统保留”分区时,安装系统要注意的两点

    1.手动格式化“系统保留”分区 2.格式化完成之后,安装系统到第二个分区,不能安装到“系统保留”分区 具体看图: 本文章转载于辰羿的博客,如有侵权请联系本论坛维护者删除.

  7. JavaSE---多线程---线程的控制

    1.Java提供了一些工具方法,可以便捷控制线程的执行: 1.1 join Thread提供了让一个线程等待另一个线程执行完成的方法:join: 当某个程序的执行流中调用其他线程的join方法,该线程 ...

  8. nginx的基础概念

    http://tengine.taobao.org/book/index.html   算是看书笔记吧,太多了就用自己的话写一下了 nginx是以多进程 的方式来工作的,启动时会有一个master进程 ...

  9. Python每日一题 008

    题目 基于多线程的网络爬虫项目,爬取该站点http://www.tvtv.hk 的电视剧收视率排行榜 分析 robots.txt User-agent: Yisouspider Disallow: / ...

  10. selenium IDE 安装环境配置