需求:

需要在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界面引用百度地图获取坐标的更多相关文章

  1. 百度地图 layer弹出地图 获取坐标

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise

    上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...

  3. 如何获取google地图、baidu百度地图的坐标

    google:打开google地图-->查找目的地-->右键:此位置居中-->地址栏键入javascript:void(prompt('',gApplication.getMap() ...

  4. django-admin引用百度地图

    实现的功能有,某个地点对应的经纬度自动填上,如果有经纬度的话,自动显示对应经纬度的地点,密匙在去百度地图引用搜索 <script type="text/javascript" ...

  5. iOS开发之引用百度地图SDK(一)-----------SDK开发指南

    (void)viewWillAppear:(BOOL)animated { [_mapView viewWillAppear]; _mapView.delegate = self; // 此处记得不用 ...

  6. Xamarin.Android 使用百度地图获取定位信息

    最近做一个项目,web端使用百度地图,PDA使用手持机自带的GPS定位系统获取经纬度,然后再百度地图上显示该经纬度会有一定距离的差异,这里就像可乐的瓶子拧上雪碧的盖子,能拧的上却不美观.所以为了数据的 ...

  7. vue 项目中引用百度地图

    新建map.js export const BaiduMap = { init: function() { const BMapURL = 'https://api.map.baidu.com/api ...

  8. ionic基于GPS定位并通过百度地图获取定位详细信息

    相信所有的前端攻城狮都会碰到移动端App.里面获取用户定位信息. 那么问题来了,怎么获取用户的定位信息(经纬度)呢. 当然方法有很多,通过百度地图API 以及 高德地图 API都是可以的.但是两个获取 ...

  9. RaceWeb介绍(7):由500强公司数据高速生成百度地图——生成坐标字段及坐标数据

    接上篇. 一.生成X坐标.Y坐标两个字段. 我们须要为每一个公司建立X坐标和Y坐标字段,用来保存XY坐标. 既然为了突出"快",这一步就有程序来完毕吧. 右键单击"世界5 ...

随机推荐

  1. Codeforces 492B Name That Tune ( 期望DP )

    B. Name That Tune time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  2. getopts举例

  3. go语言从例子开始之Example24.通道同步

    我们可以使用通道来同步 Go 协程间的执行状态.这里是一个使用阻塞的接受方式来等待一个 Go 协程的运行结束. Example: package main import "fmt" ...

  4. PCA revisit

    都知道PCA可以做降维,那它为什么可以降维,究竟是怎么降维的呢? 1. 为什么我们要降维? 我们的样本数据好好的,为什么要去做降维,第一个要想清楚这个问题. 也许你是要训练一个分类器,觉得当前特征维度 ...

  5. vue-axios请求

    <template> <div> <div v-if="!repoUrl">loding</div> <div v-else& ...

  6. java实现http协议发送和接收数据

    public void sendMessage() throws Exception { System.out.println("调用servlet开始=================&q ...

  7. String StringBuffer BufferBuilder区别

    String 是一个字符串常量,即该对象一旦被创建之后是不可以进行更改的 StringBuffer StringBuilder 是一个字符串变量 StringBuffer 是非线程安全的 但是Stri ...

  8. Random Point in Triangle

    题目链接 题意:多组输入三角形各个顶点坐标p1,p2,p3,在三角形中任取一点p,计算 期望E=max(S(p,p1,p2),max(S(p,p1,p3),S(p,p2,p3))); 思路:用随机数找 ...

  9. 埋在MySQL数据库应用中的17个关键问题

    出处:https://blog.csdn.net/weixin_42882439 MySQL的使用非常普遍,跟MySQL有关的话题也非常多,如性能优化.高可用性.强一致性.安全.备份.集群.横向扩展. ...

  10. Android数字签名的学习(转)

    转载地址:http://www.cnblogs.com/feisky/archive/2010/01/17/1650076.html 在Android系统中,所有安装到系统的应用程序都必有一个数字证书 ...