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 ...
随机推荐
- 简述IOC和AOP的作用
IOC: 控制反转,是一种设计模式.一层含义是控制权的转移:由传统的在程序中控制依赖转移到由容器来控制:第二层是依赖注入:将相互依赖的对象分离,在spring配置文件中描述他们的依赖关系.他们的依赖关 ...
- Codeforces Fix a Tree
Fix a Tree time limit per test2 seconds A tree is an undirected connected graph without cycles. Let' ...
- JS设置首字母大写算法
返回一个字符串,确保字符串的每个单词首字母都大写,其余部分小写. 像'the'和'of'这样的连接符同理. function titleCase(str) { //把字符串所有的字母变为小写,并根据空 ...
- maven3常用命令、java项目搭建、web项目搭建详细图解(转)
转自:http://blog.csdn.net/edward0830ly/article/details/8748986 maven3常用命令.java项目搭建.web项目搭建详细图解 2013-0 ...
- Java集合框架的基础接口有哪些?
Collection为集合层级的根接口.一个集合代表一组对象,这些对象即为它的元素.Java平台不提供这个接口任何直接的实现. Set是一个不能包含重复元素的集合.这个接口对数学集合抽象进行建模,被用 ...
- Java集合类里面最基本的接口
Collection:代表一组对象,每一个对象都是它的子元素. Set:不包含重复元素的Collection. List:有顺序的Collection,并且可以包含重复元素. Map:可以把键(key ...
- 【Flutter学习】之DateTime日期转换
概述: 表示一个时间点 通过构造函数或解析格式化的字符串创建DateTime对象,并且符合ISO 8601标准的子集,小时是24小时制,范围在0-23之间 DateTime对象创建之后,将是固定不变的 ...
- 关于Python实现Interface base64加解密方法
''' 以下Python Code运行环境为windows10, Python版本为3.5.3 涉及的库:base64,json,unittest ''' # coding=utf-8 # impor ...
- Spring MVC processing flow
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11484057.html DispatcherServlet receives the request. ...
- 【leetcode】982. Triples with Bitwise AND Equal To Zero
题目如下: Given an array of integers A, find the number of triples of indices (i, j, k) such that: 0 < ...