前言：

最近这两天在项目中接触了根据输入地址的定位的需求。大体的来说，是在添加时根据输入的大致地址定位到百度地图对应的位置，在百度地图显示的相关定位中选取具体的地址后，将详细地址和经纬度传回到页面，然后再保存到数据库中。如果是修改，则根据经纬度定位到地图中精确的一个位置，修改后再新的保存地址和经纬度。

分析：

这个过程的实现是借助百度地图开发平台来实现的。开发平台中有很多种类型，比如Web开发，Android开发，IOS开发，服务接口、工具支持等等。这次我借助Web开发当中的JavaScript API来实现的。具体的主要应用到了关键字检索、逆地址解析、根据经纬度定位和添加纯文字的信息窗口。还有一点，在开发时要用的一个属于自己的“密钥”，要提前去申请。

密钥申请：

登录自己的百度账号，在百度地图开发平台的首页点击右上--API控制台中，根据提示：创建应用，即可获取到访问应用的AK,也就是所谓的密钥。

功能实现：

关键代码：

 //定位按钮，显示地图$('#btnMap').click(function () {var Address = $('#txtAddress').textbox('getValue');//获页面上地址控件值var GPS = $('#txtGPS').textbox('getValue');  //获取页面上经纬度控件值（隐藏了）if (Address == "") {$.messager.alert("系统提示", '请输入客户地址', "info", function () {$('#txtAddress').next('span').find('input').focus();//获取焦点});return;}$('#map').window('open');//打开地图显示窗口showMap(Address,GPS);//调用显示地图方法})//showMap方法function showMap(Address, GPS) {if (isAddOrChange == "Add") {//添加$('#map').window('open');// 百度地图API功能var map = new BMap.Map("allmap");var firstlng = 116.404;var firstlat = 39.915;var point = new BMap.Point(firstlng, firstlat);map.centerAndZoom(point, 11);//关键字检索定位var local = new BMap.LocalSearch(map, {renderOptions: { map: map }});local.search(Address);//地理编码var geoc = new BMap.Geocoder();//地图点击事件-添加点击地图监听事件，点击地图后显示当前经纬度和地址map.addEventListener("click", showInfo);function showInfo(e) {lngLat = e.point.lng + ", " + e.point.lat;//获取经纬度//逆地址解析var pt = e.point;geoc.getLocation(pt, function (rs) {var addComp = rs.addressComponents;addr = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址});}}else {//修改// 百度地图API功能var map = new BMap.Map("allmap");var GPS = $('#txtGPS').textbox('getValue');var arr = new Array();arr = GPS.split(",");var firstlng = arr[0];var firstlat = arr[1];var point = new BMap.Point(firstlng, firstlat);map.centerAndZoom(point, 15);map.enableScrollWheelZoom(true);// 用经纬度设置地图中心点if (firstlat != "" && firstlng != "") {var marker = new BMap.Marker(point);  // 创建标注map.addOverlay(marker);              // 将标注添加到地图中map.panTo(point);}var opts = {width: 200,     // 信息窗口宽度height: 100,     // 信息窗口高度title: "地址", // 信息窗口标题enableMessage: true,//设置允许信息窗发送短息}//地理编码var geoc = new BMap.Geocoder();//地图点击事件-添加点击地图监听事件，点击地图后显示当前经纬度和地址map.addEventListener("click", showInfo);function showInfo(e) {lngLat = e.point.lng + ", " + e.point.lat;//逆地址解析var pt = e.point;geoc.getLocation(pt, function (rs) {var addComp = rs.addressComponents;//$.messager.alert("地址", addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);addr = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;var infoWindow = new BMap.InfoWindow(addr, opts);  // 创建信息窗口对象 var point =new BMap.Point(e.point.lng, e.point.lat);map.openInfoWindow(infoWindow, point); //开启信息窗口});}}}

效果图：

1、输入要定位的大致地址，点击定位。

2、点击定位后，跳转到定位管理页面，显示地图，以及根据地址定位到的相关位置。更加需要选取定位到的精确位置，确定后返回。

3、返回的地址（经纬度是隐藏控件，没显示，改地址所显示的经纬度是116.366256, 40.04465）

4、修改时，更加地址对应的经纬度定位到一个具体的位置

5、根据经纬度定位到唯一地址。

总结：

刚开始接触的时候，觉着很难，其实仔细去看，百度地图开发平台给我们封装的特别好，我们只需求要按照给出的Demo来做就好。很简单，很快就能完成，相信自己没问题的。初次做可能存在着一些不足，还望大家见谅。希望能帮到大家。

留下种子：JavaScript API

【项目实战】---地址定位（百度地图）相关推荐

android 百度地图拖动定位,百度地图获取定位，实现拖动marker定位，返回具体的位置名...
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑"; ...
深度学习项目实战-关键点定位视频课程
课程目标快速掌握如何使用caffe框架完成一个深度学习的实际项目适用人群深度学习爱好者,全民皆可入门课程简介深度学习项目实战-关键点定位课程以人脸关键点检测为背景,选择多阶段检测的网络架构, ...
【ASP.NET 进阶】根据IP地址进行百度地图定位
昨天有完成一个[ASP.NET 进阶]根据IP返回对应位置信息的小Demo,既然可以通过IP获得位置信息,那当然可以通过位置信息的经纬度获取IP的当前定位了,虽然与实际地址偏移较大,毕竟不是GPRS ...
java百度地图地名定位地址_百度地图定位显示省市区街道名称，非常实用
[实例简介] 百度地图定位显示省市区街道名称,非常实用 [实例截图] [核心代码] locSDK_3.1_Demo └── locSDK_3.1_Demo ├── AndroidManifest.xm ...
百度地图android室内定位,百度地图4.0正式发布，主打免费语音导航、室内定位、实时公交和生活搜索 (视频)...
自2010年10月百度地图在塞班平台上线了第一个版本以后,陆续登陆了Android和iPhone平台,据百度地图团队介绍,其最新的用户数已达7000万.今天,百度地图4.0 正式发布(iPhone版 ...
微信小程序城市定位(百度地图API)
概述微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
api 定位微信小程序精度_微信小程序城市定位(百度地图API)
概述微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
根据经纬度定位百度地图（带图片的）
1.首先,去百度地图定位sdk,获取key.可参考 http://blog.csdn.net/qq_28759359/article/details/52678043 2.导入下载的jar包放到lib ...
Android地图定位-百度地图上定位自己所在的位置
一效果图二主要代码 BaseActivity.java package com.itheima.baidumap74;import com.baidu.mapapi.map.BaiduMap; ...
Vue通过微信定位+百度地图获取详细地理位置信息
项目中需要使用到定位功能,定位用户所在的省市,并自动填充到省市的选择列表中,微信开发中,定位功能直接使用微信提供的接口,方便并且简单,兼容性相对好处理因为微信定位或者百度地图的定位都是先通过定位获取 ...

【项目实战】---地址定位（百度地图）

前言：

分析：

密钥申请：

功能实现：

关键代码：

效果图：

总结：

【项目实战】---地址定位（百度地图）相关推荐

最新文章

热门文章