百度地图在web中的使用(二)

背景:在做一个关于地理位置字段时,初始位置使用百度地图获取时失败,获取的位置信息不准确,奈何产品说友商好使的啊,F12看后是采用的高德,所以在这采用高德地图获取初始位置,其他的还是用百度地图


  1. 注册高德,创建实例,获取key值
  2. 引入js
  3. 高德地图获取获取当前位置:
//获取当前位置
function getCurrentLocation(){
var gdmap, geolocation;
//加载地图,调用浏览器定位服务
gdmap = new AMap.Map(''); //创建实例(如果需要地图页面,参数不为空,参数为div的id值)
gdmap.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:无穷大
});
gdmap.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
}
/*
* 解析位置结果,得到高德的经纬度地址
*/
function onComplete(data){
var gdlng = data.position.getLng();
var gdlat = data.position.getLat();
bd_encrypt(gdlng, gdlat);
}
//定位出错
function onError(data){
window.parent.tipObj.showError('未检测到您的当前位置,请刷新后重试',3);
return false;
}
  1. 高德坐标转百度(传入经度、纬度)
/*
* 高德坐标转百度(传入经度、纬度),得到百度的经纬度
* @param gdlng 高德经度
* @param gdlat 高德纬度
*/
function bd_encrypt(gdlng, gdlat){
var X_PI = Math.PI * 3000.0 / 180.0;
var x = gdlng, y = gdlat;
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
var bd_lng = (z * Math.cos(theta) + 0.0065).toFixed(8);
var bd_lat = (z * Math.sin(theta) + 0.006).toFixed(8);
getAddressBylnglat(bd_lng, bd_lat); //自定义方法,通过百度api获取地址
}
  1. 根据百度经纬度获取详细地址
/*
* 参数为百度的经纬度
*/
function getAddressBylnglat(lng, lat){
var aId = $("#aId").val();
point = new BMap.Point(lng, lat);
var getData = new BMap.Geocoder(); //根据经纬度获取地址
getData.getLocation(point, function(rs){
var pointAddress = rs.addressComponents;
var address = pointAddress.province+pointAddress.city+pointAddress.district+pointAddress.street+pointAddress.streetNumber;
var localAddress = address + ','+ '经度:' + lng + '、'+'纬度:'+lat;
//HACK 保存当前位置(暴力解决下吧)
sessionStorage.setItem('currentLocation_'+aId, localAddress); //把获取到的当前位置信息保存在sessionStorage中来使用
});
}

百度地图和高德地图结合在web中的使用(二)的更多相关文章

  1. Android笔记:百度地图与高德地图坐标转换问题

    安卓项目使用了百度地图的定位SDK,web端使用的也是百度地图, 后来发现界面显示百度地图不如高德效果好,web改用高德地图,原本的百度地图坐标是可以直接使用的,由于高德和百度地图的坐标系不一致 要如 ...

  2. 百度地图和高德地图坐标系的互相转换 四种Sandcastle方法生成c#.net帮助类帮助文档 文档API生成神器SandCastle使用心得 ASP.NET Core

    百度地图和高德地图坐标系的互相转换   GPS.谷歌.百度.高德坐标相互转换 一.在进行地图开发过程中,我们一般能接触到以下三种类型的地图坐标系: 1.WGS-84原始坐标系,一般用国际GPS纪录仪记 ...

  3. iOS打开百度地图、高德地图导航

    1.判断手机里是否已经安装了百度地图或者高德地图: BOOL hasBaiduMap = NO; BOOL hasGaodeMap = NO; if ([[UIApplication sharedAp ...

  4. ios 一步一步学会自定义地图吹出框(CalloutView)-->(百度地图,高德地图,google地图)

    前言 在 ios上边使用地图库的同学肯定遇到过这样的问题:吹出框只能设置title和subtitle和左右的view,不管是百度地图还是高德地图还是自带的 google地图,只提供了这四个属性,如果想 ...

  5. arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  6. 在WPF中使用谷歌地图和高德地图

    原文:在WPF中使用谷歌地图和高德地图 在桌面软件开发中可能会遇到这样的需求:显示地图. 常用的地图API有Google Map和高德地图.二者都提供了各种平台的API. 为了方便集成,本文使用Jav ...

  7. 百度地图、高德地图、Google地图等坐标系相关梳理

    1.地理坐标系与投影坐标系 地理坐标系也就是球面坐标系,是将本不是椭球体的地球进行椭球体化,从而形成球面坐标体系,国际标准的地理坐标系就是WGS-84坐标系: 只不过各个国家为了反映该国家所在区域地球 ...

  8. [WEB地图] 2017高德地图API WEB开发(key申请,地图搭建)简约教程

      前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情   高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去“高德地 ...

  9. 关于ArcGis for javascript整合百度地图 天地图 高德地图进行搜索

    1.ArcGis for javascript整合百度地图搜索 1.1.首先引入百度地图的api <!-- 引入百度地图API --> <script type="text ...

随机推荐

  1. 设计模式之装饰模式,session共享的底层原理

    前言 还记得当初写spring-session实现分布式集群session的共享的时候,里面有说到利用filter和HttpServletRequestWrapper可以定制自己的getSession ...

  2. ASP.NET-FineUI开发实践-18

    Grid编辑下垃级联 看了看专业版的例子,分为以下几步,都是前端的 1.编辑父下拉框后,重置子下拉框 2.编辑子下垃框前,通过父下垃框数据得到下垃项,然后绑定数据 所以这里要截取Grid的两个事件,编 ...

  3. Mysql加锁过程详解(2)-关于mysql 幻读理解

    Mysql加锁过程详解(1)-基本知识 Mysql加锁过程详解(2)-关于mysql 幻读理解 Mysql加锁过程详解(3)-关于mysql 幻读理解 Mysql加锁过程详解(4)-select fo ...

  4. SpringBoot(12) SpringBoot创建非web应用

    在Spring Boot中,要创建一个非Web应用程序,实现CommandLineRunner并覆盖run()方法 @SpringBootApplication public class Spring ...

  5. Coder解压探索===冥想补蓝v.1.0

    主题是什么? 这是一篇是我自己在探索冥想术的过程中,有了一些浅薄的收获,所以写出来记录与分享. 我不太记得最早是因为什么原因去学习冥想,一开始对我而言,这个词带有很多成见,诸如“老僧入定”“三界六道” ...

  6. MySQL中间件之ProxySQL(11):链式规则( flagIN 和 flagOUT )

    返回ProxySQL系列文章:http://www.cnblogs.com/f-ck-need-u/p/7586194.html 1.理解链式规则 在mysql_query_rules表中,有两个特殊 ...

  7. CSS一些样式以及注意

    [在这里归纳一些有用,但是不常用而不容易记住的一些CSS属性-(日后慢慢补充)] border-radius:100px; --圆角[比如按钮使用之后由长方形变成类似椭圆] placeholder=& ...

  8. 47.Linux-DEVICE_ATTR()介绍及使用示例

    1.介绍 使用DEVICE_ATTR,可以实现驱动在sys目录自动创建文件,我们只需要实现show和store函数即可. 然后在应用层就能通过cat和echo命令来对sys创建出来的文件进行读写驱动设 ...

  9. nginx代理配置 配置中的静态资源配置,root 和 alias的区别。启动注意事项

    这篇主要内容是:nginx代理配置 配置中的静态资源配置,root 和 alias的区别.启动注意事项! 为什么会在window上配置了nginx呢?最近我们的项目是静态资源单独放在一个工程里面,后端 ...

  10. angular ng-click防止重复提交

    方法一:点击后,让button的状态变为disable js指令: .directive('clickAndDisable', function() { return { scope: { click ...