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中的内容拿到坐标

时间: 2024-11-05 15:50:24

JSP界面引用百度地图获取坐标的相关文章

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>layer弹出百度地图</title> <script src="jquery.min.js"></script> <script src="layer/layer.js"><

ionic cordova 引用百度地图以及利用手机GPS定位

首先引入百度地图 在html文件里面加入 <head> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script> //申请一个百度密钥,建议申请浏览器版的比较方便测试 </head> <body> <button id = "getPosition"&g

Vue项目引用百度地图并实现搜索定位等功能

Tip:本篇文章为案例分析,技术点较多,所以篇幅较长,认真阅览的你一定会学到很多知识. 前言:百度地图开放平台 给开发者们提供了丰富的地图功能与服务,使我们的项目中可以轻松地实现地图定位.地址搜索.路线导航等功能.本文给大家介绍如何在vue项目中引用百度地图,并设计实现简单的地图定位.地址搜索功能. 一.效果图及功能点 先来看一下效果图 效果图看不够? 点此 试试在线操作!(初次进入加载较慢,请耐心等待) 功能点: 挂载百度地图 封装逆地址解析函数(根据坐标点获取详细地址) 设置图像标注并绑定拖

iOS 百度地图获取地理位置名称

目前很多的应用都用到了百度地图这一版本,不过有些方法是我在网上并没有找到的,但是这并不意味着就没有相关的文章介绍,那么这里我所记录的就是百度地图获取地理位置,以及省份,城市,区域,其他的不多说了,直接进入正题吧:       创建地图基本图层 首先,需要到http://dev.baidu.com/wiki/imap/index.php?title=iOS平台/相关下载下载全部内容,包括文档,示例代码和开发包. 然后获取自己的API KEY,具体方法按百度的官网申请就行,比较简单. 下载的文件应该

百度地图获取数据库点的坐标,并定时刷新到页面上

后台代码 先创建marker点的实体类(并利用Spring注解功能实现自动自动建表) 1 package com.sdtg.ditu.bean; 2 3 import javax.persistence.Column; 4 import javax.persistence.Entity; 5 import javax.persistence.GeneratedValue; 6 import javax.persistence.Id; 7 import javax.persistence.Tabl

【HERE地图开发记录】点击地图获取坐标

最近的一个项目需要获取国外较多的POI等信息,GOOGLE在墙内开发实在麻烦,最后选用了N记的HERE地图,在这里不定期记录一些东西. 开发起来麻烦的东西是挺多的,特别是我之前也没接触过地图开发,一来就使用这个少人使用的地图来开发,很多问题基本GOOGLE stackoverflow没搜到有用的,关于API的话,例子还是足够的,不过前面说到由于个人没做过地图开发,找起来挺费劲的,官网的搜索引擎实在不敢恭维. 这篇博文主要记录下怎么样在点击地图某处后获取坐标(本文会用JS API) 1. 首先前面

百度地图获坐标拾取

1 jsp页面 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />   <style type="text/css">        .allmap {width: 240px;height: 180px;overflow: hidden;margin:0;}        #allmap {width: 100%;height: 1

微信定位功能结合百度地图获取用户城市

需要结合百度地图的API,请先完成这篇文章的流程:<使用百度地图将经纬度转换成具体位置> 以vuejs为例 beforeMount () { var that = this; this.city = '正在定位城市...'; this.wxapi.getWxConfig({ url: window.location.href.split('#')[0] }).then(_ => { if (+(_.returnCode) == 0) { // 初始化微信配置 wx.config(_.da

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

最近做一个项目,web端使用百度地图,PDA使用手持机自带的GPS定位系统获取经纬度,然后再百度地图上显示该经纬度会有一定距离的差异,这里就像可乐的瓶子拧上雪碧的盖子,能拧的上却不美观.所以为了数据的精确性,PDA端也用百度地图的接口. 下面主要流程分为以下几步: 新建项目BaiduMapAPIDemo. 下载百度地图 --Android定位SDK . Binging Labrary项目添加相关文件. 注册百度开发平台,创建应用,获取AK. 写入百度提供示例代码. 查看输出结果. 第一步:新建项