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 ...
随机推荐
- $vim$配置以及$linux$
vim的配置 1 set nu "设置行标号 2 set tabstop=4 "这一条以及以下三条都把缩进设为4 3 set shiftwidth=4 4 set softtabs ...
- RabbitMq--4--集群(转载)
RabbitMQ消息服务用户手册 1 基础知识 1.1 集群总体概述 Rabbitmq Broker集群是多个erlang节点的逻辑组,每个节点运行Rabbitmq应用,他们之间共享用户.虚拟主机.队 ...
- C#base使用笔记
一,base继承使用 using System; using System.Collections.Generic; using System.Linq; using System.Text; nam ...
- 人脸识别课件需要安装的python模块
Python3.6安装face_recognition人脸识别库 https://www.jianshu.com/p/8296f2aac1aa
- word--->pdf资料转载..
https://blog.csdn.net/dsn727455218/article/details/80667927
- BZOJ5205 [CodePlus 2018 3 月赛]白金元首与莫斯科
传送门 emm在雅礼集训的时候听到的一道题 上来就觉得是插头dp 最后果然是轮廓线状压233 我们简化一下题意. 有一个n*m的网格,每个格子是空地或障碍物,询问把每一个空地看成障碍物的情况下,用1* ...
- 小程序内嵌H5页面判断微信及小程序环境
判断微信及小程序环境 1.H5页面引入jweixin-1.3.2.js 2. var ua = window.navigator.userAgent.toLowerCase(); if(ua.matc ...
- C语言集成开发环境使用小记
时隔6年,我又重操C语言,是什么让我如此再下定决心?就是不想让自己所学过的知识就此荒废了,我重新以一个C语言初学者的身份(当然,稍稍有点基础,以前的知识忘得没这么快^_^)温故C语言,学习了几天,果真 ...
- [REPRINT]MODIFYING USER ACCOUNTS(usermod)
http://landoflinux.com/linux_usermod_command.html Append Additional Groups to an exiting account use ...
- react — script引入 和 脚手架使用的区别
1.React 入门实例教程 :http://www.ruanyifeng.com/blog/2015/03/react.html ( 阮一峰的博客) 或 https://segmentfaul ...