JSP界面引用百度地图获取坐标
需求:
需要在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界面引用百度地图获取坐标的更多相关文章
- 百度地图 layer弹出地图 获取坐标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise
上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...
- 如何获取google地图、baidu百度地图的坐标
google:打开google地图-->查找目的地-->右键:此位置居中-->地址栏键入javascript:void(prompt('',gApplication.getMap() ...
- django-admin引用百度地图
实现的功能有,某个地点对应的经纬度自动填上,如果有经纬度的话,自动显示对应经纬度的地点,密匙在去百度地图引用搜索 <script type="text/javascript" ...
- iOS开发之引用百度地图SDK(一)-----------SDK开发指南
(void)viewWillAppear:(BOOL)animated { [_mapView viewWillAppear]; _mapView.delegate = self; // 此处记得不用 ...
- Xamarin.Android 使用百度地图获取定位信息
最近做一个项目,web端使用百度地图,PDA使用手持机自带的GPS定位系统获取经纬度,然后再百度地图上显示该经纬度会有一定距离的差异,这里就像可乐的瓶子拧上雪碧的盖子,能拧的上却不美观.所以为了数据的 ...
- vue 项目中引用百度地图
新建map.js export const BaiduMap = { init: function() { const BMapURL = 'https://api.map.baidu.com/api ...
- ionic基于GPS定位并通过百度地图获取定位详细信息
相信所有的前端攻城狮都会碰到移动端App.里面获取用户定位信息. 那么问题来了,怎么获取用户的定位信息(经纬度)呢. 当然方法有很多,通过百度地图API 以及 高德地图 API都是可以的.但是两个获取 ...
- RaceWeb介绍(7):由500强公司数据高速生成百度地图——生成坐标字段及坐标数据
接上篇. 一.生成X坐标.Y坐标两个字段. 我们须要为每一个公司建立X坐标和Y坐标字段,用来保存XY坐标. 既然为了突出"快",这一步就有程序来完毕吧. 右键单击"世界5 ...
随机推荐
- asciinema.org -Record Your Terminal Share it with no fuss
紀錄 Terminal 下指令的過程 http://asciinema.org/
- java并发编程之美-阅读记录5
java并发包中的并发List 5.1CopeOnWriteArrayList 并发包中的并发List只有CopyOnWriteArrayList,该类是一个线程安全的arraylist,对其进行的修 ...
- 【记录】linux 命令拷贝文件到远程服务器,linux下载文件到本地
Linux scp命令用于Linux之间复制文件和目录 -1 强制scp命令使用协议ssh1 -2 强制scp命令使用协议ssh2 -4 强制scp命令只使用IPv4寻址 -6 强制scp命令只使用I ...
- 二、jQuery Ajax请求
一.Ajax请求 1.jQuery Ajax请求 let ajaxTimeOut = $.ajax({ //将网络请求事件赋值给变量ajaxTimeOut url: "/api_v1.1/a ...
- Kotlin之let,apply,with,run函数区别(转)
转自:https://blog.csdn.net/guijiaoba/article/details/54615036 Kotlin之let,apply,with,run函数区别 重新整理 重新整理了 ...
- React 组件嵌套 父子关系
代码实例; <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...
- vue video全屏播放
需求: 1.视频为长方形,页面初始化打开为横屏全屏播放视频. 2.微信不支持自动播放,故自动播放需求删除. 方法: 1.vue-video-player插件 因需求较简单,仅要求播放本地一个视频,故未 ...
- python3.x 类似cpp引用指针传参修改
#同名局部变量调用外部全局变量: num=100def fun(): global num#告诉编译器是全局的num num+=100 print(num)print(fun)print(fun()) ...
- flume源码
IDEA查看源码 IDEA快捷键 1 查看接口的实现类:Ctrl+Alt+B 选中按快捷键,然后跳到实现类的地方去 2 切换页面:Alt+<- 和 Alt+-> Alt+-> 3 查 ...
- js 原生 document.querySelectorAll document.getElementsByTagName document.querySelector document.getElementById的区别
1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2.querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组). ...