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 ...
随机推荐
- 48-python基础-python3-字符串-常用字符串方法(六)-strip()-rstrip()-lstrip()
7-用 strip().rstrip()和 lstrip()删除空白字符 strip()字符串方法将返回一个新的字符串,它的开头或末尾都没有空白字符. lstrip()和 rstrip()方法将相应删 ...
- vscode 常用命令行
Ctrl+Shift+P: 打开命令面板 打开一个新窗口: Ctrl+Shift+N 关闭窗口: Ctrl+Shift+W 新建文件 Ctrl+N 代码行缩进 Ctrl+[ . Ctrl+] 上下 ...
- Vue中组件间传值常用的几种方式
版本说明: vue-cli:3.0 一.父子组件间传值 1.props/$emit -父组件==>>子组件: 子组件中通过定义props接收父组件中通过v-bind绑定的数据 父组件代码 ...
- 字符串String的使用方法
var ddd = "举头望明月,低头思故乡" document.writeln(ddd.split(''));//选择字符串中的一个标识符,将字符串分割成数组; var slic ...
- Matplotlib_key_point
Matplotlib官方入门教程: http://www.labri.fr/perso/nrougier/teaching/matplotlib/ 本文参考教程: http://codingpy.co ...
- c++后台开发面试常见知识点总结(五)场景设计
搜索引擎的实现,会用到哪些重要的数据结构 设计实现一个HTTP代理服务器 / web服务器 / FTP服务器/ 设计实现cache缓存web服务器的网页访问记录 把一个文件快速下发到100w个服务器 ...
- setattr(object, name, value)¶
This is the counterpart of getattr(). The arguments are an object, a string and an arbitrary value. ...
- js 原生 document.querySelectorAll document.getElementsByTagName document.querySelector document.getElementById的区别
1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2.querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组). ...
- JavaScript 的 API设计原则
一.接口的流畅性 好的接口是流畅易懂的,他主要体现如下几个方面: 1.简单 操作某个元素的css属性,下面是原生的方法: document.querySelectorAll('#id').style. ...
- SCP-bzoj-4734
项目编号:bzoj-4734 项目等级:Safe 项目描述: 戳这里 特殊收容措施: 附录: #include <bits/stdc++.h> #define range(i,c,o) f ...