百度地图应用之将google坐标转成百度坐标_怎样把手机谷歌定位换成百度定位-程序员宅基地

技术标签: 前端  

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
   
    <title>百度地图应用之将google坐标转成百度坐标</title>
</head> 
<body>
    <div id="allmap"></div>




</body>
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
</html>
<script type="text/javascript">
var allmap = document.getElementById("allmap");
allmap.style.cssText = "width: 500px;height:600px";//设置地图的宽高
var bm = new BMap.Map("allmap"); //地图初始化
//longitude:经度   latitude:纬度   name:名字 isGoogleCoordinate:是否为谷歌坐标
function showMarker(longitude, latitude, name,isGoogleCoordinate) {
    // 百度地图API功能
    //谷歌坐标
    var x = longitude;
    var y = latitude;
    var ggPoint = new BMap.Point(x,y);
    //地图初始化
    bm.centerAndZoom(ggPoint, 17);
     //坐标转换完之后的回调函数
    translateCallback = function (data){
      if(data.status === 0) {
        var marker = new BMap.Marker(data.points[0]);
        bm.addOverlay(marker);
        var label = new BMap.Label(name,{offset:new BMap.Size(20,-10)});
        marker.setLabel(label); //添加百度label
        bm.centerAndZoom(data.points[0], 17);
      
      }
    }
if(isGoogleCoordinate){//如果是谷歌坐标,则调用convertor.translate()进行转换并调用回调函数
        var convertor = new BMap.Convertor();
        var pointArr = [];
        pointArr.push(ggPoint);
        convertor.translate(pointArr, 3, 5, translateCallback);
}else{//非谷歌坐标则不需要转换
  //添加谷歌marker和label
  var markergg = new BMap.Marker(ggPoint);
  bm.addOverlay(markergg); //添加谷歌marker
  var labelgg = new BMap.Label(name,{offset:new BMap.Size(20,-10)});
  markergg.setLabel(labelgg); //添加谷歌label
  bm.centerAndZoom(ggPoint, 17);
    }
  
}
 var longitude = 116.32715863448607;
 var latitude = 39.990912172420714;
 var name = "北京";
 var isGoogleCoordinate = true;
 showMarker(longitude,latitude,name,isGoogleCoordinate);//调用
</script>

注:如果不设置地图的宽和高可能会出现无法将坐标定位到显示的中心位置。所需密钥可以通过访问http://lbsyun.baidu.com/apiconsole/key申请获得

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/naiqihe/article/details/52988186

智能推荐

zbrush导入obj模型不显示_ZBrush中如何导入和导出OBJ文件—ZBrush教程-程序员宅基地

文章浏览阅读3.5k次。原标题:ZBrush中如何导入和导出OBJ文件—ZBrush教程 ZBrush中如何导入和导出OBJ文件ZBrush软件中对于文件的导出与储存格式是多样的。OBJ格式是如何导入和导出ZBrush的,很多朋友发现ZBrush更多情况下显示的是ZTL和ZPR的格式,究竟如何导入和导出OBJ的文件,本文小编将做详细讲解。导入OBJ文件当有一个OBJ格式的文件要导入ZBrush中细致雕刻的时候,单击Too..._zbrush现有模型导入找不到

java factorial_[Java]函数求阶乘n!(factorial)(四种方法)-程序员宅基地

文章浏览阅读2.3k次。1. 引言实现阶乘的方法很多,这边介绍三种方法,分别是递归,尾递归,循环和BigDecimal。2. 代码public class Test {public static void main(String[] args) {// TODO Auto-generated method stubAlogrithm a = new Alogrithm1();a.fact(5);a.print(a.fac..._java写一个类factorial求n!

Python pandas.DataFrame.interpolate函数方法的使用_python datafram.interpolate-程序员宅基地

文章浏览阅读1.1k次。Pandas是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。Pandas 纳入了大量库和一些标准的数据模型,提供了高效地操作大型数据集所需的工具。Pandas提供了大量能使我们快速便捷地处理数据的函数和方法。你很快就会发现,它是使Python成为强大而高效的数据分析环境的重要因素之一。本文主要介绍一下Pandas中pandas.DataFrame.interpolate方法的使用。原文地址:Python pandas.DataFrame.interpolate函数方法的使用..._python datafram.interpolate

MySQL Percona Toolkit--pt-osc重点参数-程序员宅基地

文章浏览阅读315次。修改命令参数alter1、不需要包含alter table关键字,可以包含多个修改操作,使用逗号分开,如"drop clolumn c1, add column c2 int"2、不支持rename语句来对表进行重命名操作3、不支持对索引进行重命名操作4、如果删除外键,需要对外键名加下划线,如删除外键fk_uid, 修改语句为"DROP FOREIGN KEY _fk..._mysql pt-osc参数

IDEA Maven 阿里云镜像 下载Jar失败_idea阿里云镜像失败-程序员宅基地

文章浏览阅读407次。IDEA Maven 阿里云镜像 下载Jar失败_idea阿里云镜像失败

如何装好Home Assistant,四种方式安装HA OS测试-程序员宅基地

文章浏览阅读5.2k次,点赞30次,收藏27次。5.KVM8.联想E14笔记本。_ha os

随便推点

Unity与原生交互之AndroidStudio篇——Unity导出Android工程,导入AndroidStudio打包APK全流程_unity导出安卓工程-程序员宅基地

文章浏览阅读4.6k次,点赞6次,收藏17次。或(1)首先的问题:该错误是。_unity导出安卓工程

BBS论坛系统详细设计与具体代码实现-程序员宅基地

文章浏览阅读217次,点赞4次,收藏7次。1.背景介绍在我们的日常生活中,BBS论坛系统是非常常见的一种网络社交形式。它为广大网友提供了一个公共的交流平台,使得人们可以在这里分享信息,交流想法,甚至结识新的朋友。本文将详细介绍BBS论坛系统的设计和实现过程,帮助读者更好地理解这一复杂的系统。1.1 论坛系统的历史和发展

技术债务_技术债务的10倍解决方案-程序员宅基地

文章浏览阅读113次。技术债务Case study on an early-stage startup’s React.js front end 早期创业公司React.js前端的案例研究 You blame high technical debt for low velocity. You get asked: How much time do you need to address it? Unknown. Bu..._技术债务降低方案模板

前端知识点-CSS相关知识点-程序员宅基地

文章浏览阅读546次。1、解释一下CSS的盒子模型?回答一:a、标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b、网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。c、这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这..._吸附页面网站

CENTOS7 安装openstack mitaka版本(最新整理完整版附详细截图和操作步骤,添加了cinder和vxlan)...-程序员宅基地

文章浏览阅读190次。CENTOS7 安装openstack mitaka版本(最新整理完整版附详细截图和操作步骤,添加了cinder和vxlan,附上个节点的配置文件)实验环境准备:为了更好的实现分布式mitaka版本的效果。我才有的是VMware的workstations来安装三台虚拟机,分别来模拟openstack的controller节点 compute节点和cinder节点。(我的宿主机..._安装openstack yum install centos-release-openstack-mitaka

职业中专计算机网络技术试题,计算机网络技术试题及答案01-程序员宅基地

文章浏览阅读288次。益阳市第一职业中专学校2015-2016学年度专业类计算机网络期末试题(卷)姓名:_______ 班级:______一、选择题 (每题2分,共60分,每题只有一个正确答案, 将正确答案编号 A、B、C、D、写在答题卡相应的题号括号内)A、资源共享 B、 提高计算机的可靠性C、共享数据库 D、 使用服务器上的硬盘2.若一个信道上传输..._若一个信道上传输的信号码元仅可取四种

推荐文章

热门文章

相关标签