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 ...
随机推荐
- Codefores 507B Amr and Pins
B. Amr and Pins time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...
- XX-net 3.11.9 登陆Google等出现没有开启cookie的问题
糟糕!您的浏览器似乎禁用了 Cookie.请务必启用 Cookie 或尝试打开一个新的浏览器窗口. 出现这个问题解决方法: 1.配置好X-tunnel,即登录账号2.打开谷歌浏览器或者你用的浏览器,设 ...
- is not an enclosing class
public class A {public class B { }}; 需要实例B类时,按照正逻辑是,A.B ab = new A.B();那么编译器就会出现一个错误–“is not an encl ...
- C#编程--第二天
一.变量:变量先声明,后赋值,再使用. 语法:变量类型 变量名=值: 变量类型: 分为基本数据类型和引用类 基本数据类型:整型.浮点型.字符型.布尔型 引用类:字符串.日期时间.枚举类型.结构类型 i ...
- ambari安装hadoop
前言 hadoop除了社区版之外,还有两个主流的分支,一个是cdh版本,一个是hdp版本,其中ambari是hdp版本的部署工具 1.ambari安装准备 https://docs.hortonwor ...
- nohup及crontab定时任务
一.关于nohup: 1.假设有一 tash.sh 启动是:nohup /home/spex/bin_prodDemo/task.sh & 一定 ...
- makefile 中的patsubst
1. wildcard:扩展通配符 2. notdir:去除路径 3. patsubst:替换通配符 若有一个makefile如下: src=$(wildcard *.c ./sub/*.c) dir ...
- mapreduce求共同好友
逻辑分析 以下是qq的好友列表数据,冒号前是一个用户,冒号后是该用户的所有好友(数据中的好友关系是单向的) A:B,C,D,F,E,O B:A,C,E,K C:F,A,D,I D:A,E,F,L E: ...
- LOJ 2552 「CTSC2018」假面——DP
题目:https://loj.ac/problem/2552 70 分就是 f[i][j] 表示第 i 个人血量为 j 的概率.这部分是 O( n*Q ) 的:g[i][j][0/1] 表示询问的人中 ...
- AcWing 229. 新NIM游戏 (线性基+博弈论)打卡
题目:https://www.acwing.com/problem/content/description/231/ 题意:给出n堆石子,然后第一回合,A玩家可以随便拿多少堆石子,第二回合B玩家随便拿 ...