<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

		<title></title>

		<style>

			* {

				margin: 0;

				padding: 0;

			}

			html,body {

				height: 100%;

			}

			#mapDiv {

				width: 100%;

				height: 100%;

			}

		</style>

	</head>

	<body>

		<!--显示地区的div-->

		<div id="mapDiv">

		</div>		

		<script src="http://api.map.baidu.com/api?v=2.0&ak=Q6aiD950lCsEWDWblF8T5BzQjxeUylCj"></script>

		<script>

			window.onload = function() {

				//经纬度

				var longitude = 121.51155629576095;

				var latitude = 38.86043635958201;

				//调用百度地图的API

				var map = new BMap.Map('mapDiv'); //创建地图对象

				var point = new BMap.Point(longitude,latitude);//坐标点对象

				map.centerAndZoom(point,15) ;//设置坐标中心点和缩放级别

				var marker = new BMap.Marker(point); //创建标记点

				map.addOverlay(marker);//在地图上添加标记点

				var label = new BMap.Label('纠正之前的GPS坐标',{offset:new BMap.Size(20,-20)}); //创建文字标签

				marker.setLabel(label); //添加标记的文字标签

				//添加地图类型控件，默认在地图右上方

				map.addControl(new BMap.MapTypeControl());

				//地图平移缩放控件，PC端默认地图左上方，移动端提供缩放控件，默认在地图右下方

				map.addControl(new BMap.NavigationControl());

				//比例尺控件，默认在地图左下方，显示地图的比例关系

				map.addControl(new BMap.ScaleControl());

				//缩略地图控件，默认在地图右下方，是一个可折叠的缩略地图

				map.addControl(new BMap.OverviewMapControl());

				//定位控件，针对于移动端，默认在地图左下方

				map.addControl(new BMap.GeolocationControl());

				//开启滚轮缩放

				map.enableScrollWheelZoom(true);

				//转换gps坐标为百度坐标,延迟3000毫米不是必须，只是模拟网络网络延迟

				setTimeout(function() {

					var convertor = new BMap.Convertor(); //转换坐标类的对象

					var pointArr = []; //坐标数组

					pointArr.push(point); //加入一个坐标对象（可以加入多个坐标对象）

					convertor.translate(pointArr,1,5,translateCallback);//转换坐标					

				},3000);

				//转换完毕的回调函数，data就是转换后的数据

				function translateCallback(data) {

					if (data.status == 0) { //0为转换成功

						var marker = new BMap.Marker(data.points[0]); //创建标记点

						map.addOverlay(marker);//在地图上添加标记点

						var label = new BMap.Label('纠正之后的GPS坐标',{offset:new BMap.Size(20,-20)}); //创建文字标签

						marker.setLabel(label); //添加标记的文字标签

						map.setCenter(data.points[0]);//调整地图中心点

					}

				}

			}

		</script>

	</body>

</html>

　　

h5-23-百度地图api的更多相关文章

  1. H5调用百度地图API获取地理位置

    <script src="http://api.map.baidu.com/api?v=2.0&ak=填入申请的AK"></script> < ...

  2. H5微信通过百度地图API实现导航方式一

    根据业务需求修改百度API,实现微信中的导航功能.因为源码中SearchInfoWindow_min.js有点小问题(部分小城市公交线路少,查不到路线时没有提示),所以这里在源码的基础上改了一点点.可 ...

  3. 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）

    原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...

  4. 百度地图API的使用

    ------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...

  5. 百度地图API试用--(初次尝试)

    2016-03-17: 百度地图API申请key的步骤相对简单,不做过多阐述. 初次使用百度地图API感觉有点神奇,有些功能加进来以后有点问题,注释掉等有空再解决. 代码如下: <%@ page ...

  6. 百度地图API显示多个标注点并添加百度样式检索窗口

    原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...

  7. 在iOS APP中使用H5显示百度地图时如何支持HTTPS？

    现象: 公司正在开发一个iOSAPP,使用h5显示百度地图,但是发现同样的H5页面,在安卓可以显示出来,在iOS中就显示不出来. 原因分析: 但是现在iOS开发中,苹果已经要求在APP中的所有对外连接 ...

  8. 百度地图API简单应用

    在做移动端应用时经常用到百度地图API,百度API有强大的示例和文档,开发之前去百度相关网站注册密钥,很块博主只花了几分钟 百度地图API范例 百度地图API文档说明 例子1:输入特定关键字绘制地图标 ...

  9. 百度地图API使用方法详解

    最近做了个项目,其中项目中有个需求需要用到百度地图进行导航,通过查阅相关资料参考百度地图api完成了一个例子. API地址:http://developer.baidu.com/map/jsdemo. ...

  10. 百度地图api简单使用方法

    百度地图API的使用方法   百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...

随机推荐

  1. 浅谈C#中常见的委托

    一提到委托,浮现在我们脑海中的大概是听的最多的就是类似C++的函数指针吧,呵呵,至少我的第一个反应是这样的. 关于委托的定义和使用,已经有诸多的人讲解过,并且讲解细致入微,尤其是张子阳的那一篇.我就不 ...

  2. sql建表，建索引注意事项

    建表注意 .建议字段定义为NOT NULL 搜索引擎 MyISAM InnoDB 区别 InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定.基 ...

  3. HDU 6119 小小粉丝度度熊 【预处理+尺取法】（2017"百度之星"程序设计大赛 - 初赛（B））

    小小粉丝度度熊 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  4. I2S

    音频数据传输而制定: Inter—IC Sound : 单线 时钟和数据一条线,时分复用: 标准的I2S总线电缆是由3根串行导线组成的:1根是时分多路复用(简称TDM)数据线:1根是字选择线:1根是时 ...

  5. bzoj5328: [Sdoi2018]物理实验

    果然我还是太菜了,爆了一天才过....隔壁肉丝都不知道喊了多少句哎╮(╯▽╰)╭我又A了什么傻逼题(然鹅就是wf和国集的题QWQ) 其实这个题就是个裸题,但是我就是不会... 这个题第一步就是明显的旋 ...

  6. HDU1560 DNA sequence —— IDA*算法

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1560 DNA sequence Time Limit: 15000/5000 MS (Java/Oth ...

  7. windows下关闭指定端口服务，解决tomcat端口占用问题

    http://blog.aizhet.com/Server/640.html 在windows下做java EE的开发时:搭建 Eclipse+tomcat的java web开发环境:在应用之中经常遇 ...

  8. 书写优雅的shell脚本（六）- shell中的命令组合（&&、||、（））

    shell 在执行某个命令的时候,会返回一个返回值,该返回值保存在 shell 变量 $? 中.当 $? == 0 时,表示执行成功:当 $? == 1 时,表示执行失败.  有时候,下一条命令依赖前 ...

  9. Watir: 如何处理简单的网页弹出警告框？

    以下是一个很经典的把Watir与AutoIt连接在一起的实例.如果我们对AutoIT了解的更多,处理类似的问题会更加简单.以下实例会判断页面上是否有某“删除”链接,一旦有该链接,就点击,然后点击弹出的 ...

  10. B. Spider Man

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...