需求:

需要在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. JS异步加载,JQ事件不被执行解决方法

    一,在我们实现动态生成HTML代码时会出现,使用JQ方法会不被执行,解决方法,如下:使用jquery的委托事件,将该方法委托到页面已经存在的一个节点上 <!DOCTYPE html> &l ...

  2. android pull 解析器解析xml文档

    person.xml <?xml version="1.0" encoding="UTF-8"?> <persons> <pers ...

  3. Vue-基础(二)

    一,Vue中的组件化开发: Vue中的组件也就是Vue实例 组件类型: 通用组件(例如,表单,弹窗,布局类等) 业务组件(抽奖,机器分类) 页面组件(单页面开发程序的每个页面都是一个组件) 组件开发三 ...

  4. zxing opencv

           

  5. log4j.xml配置详解(转)

    转自:http://willow-na.iteye.com/blog/347340 Xml代码 <?xml version="1.0" encoding="UTF- ...

  6. 力扣—set matrix zeroes (矩阵置零) python实现

    题目描述: 中文: 给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0.请使用原地算法. 英文: Given a m x n matrix, if an eleme ...

  7. JVM内存模型及GC回收算法

    该篇博客主要对JVM内存模型以及GC回收算法以自己的理解和认识做以记录. 内存模型 GC垃圾回收 1.内存模型 从上图可以看出,JVM分为 方法区,虚拟机栈,本地方法栈,堆,计数器 5个区域.其中最为 ...

  8. Springmvc中的一些问题解决

    Spring mvc中的异常 做统一处理,全局异常处理器 异常处理类代码: 必须实现接口  然后返回值是ModelAndView  那就可以做个展示页面了 package com.toov5.mvc. ...

  9. 牛客挑战赛33 F 淳平的形态形成场(无向图计数,EGF,多项式求逆)

    传送门: 淳平的形态形成场 题解: 把a排序后,直接统计答案恰好为a[i]并不好做,可以统计答案>a[i]的方案数,设为\(f[i]\). 即不存在一个联通块,所有的权值都<=a[i]. ...

  10. 重磅发布!阿里云推PostgreSQL 10 高可用版

    摘要: 近日,阿里云重磅发布PostgreSQL 10 高可用本地SSD盘版,相比原 9.4 版本又新增了JSONB.BRIN索引.GROUPING SETS/CUBE/ROLLUP.UPSERT等多 ...