h5-23-百度地图api
<!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的更多相关文章
- H5调用百度地图API获取地理位置
<script src="http://api.map.baidu.com/api?v=2.0&ak=填入申请的AK"></script> < ...
- H5微信通过百度地图API实现导航方式一
根据业务需求修改百度API,实现微信中的导航功能.因为源码中SearchInfoWindow_min.js有点小问题(部分小城市公交线路少,查不到路线时没有提示),所以这里在源码的基础上改了一点点.可 ...
- 【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)
原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...
- 百度地图API的使用
------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...
- 百度地图API试用--(初次尝试)
2016-03-17: 百度地图API申请key的步骤相对简单,不做过多阐述. 初次使用百度地图API感觉有点神奇,有些功能加进来以后有点问题,注释掉等有空再解决. 代码如下: <%@ page ...
- 百度地图API显示多个标注点并添加百度样式检索窗口
原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...
- 在iOS APP中使用H5显示百度地图时如何支持HTTPS?
现象: 公司正在开发一个iOSAPP,使用h5显示百度地图,但是发现同样的H5页面,在安卓可以显示出来,在iOS中就显示不出来. 原因分析: 但是现在iOS开发中,苹果已经要求在APP中的所有对外连接 ...
- 百度地图API简单应用
在做移动端应用时经常用到百度地图API,百度API有强大的示例和文档,开发之前去百度相关网站注册密钥,很块博主只花了几分钟 百度地图API范例 百度地图API文档说明 例子1:输入特定关键字绘制地图标 ...
- 百度地图API使用方法详解
最近做了个项目,其中项目中有个需求需要用到百度地图进行导航,通过查阅相关资料参考百度地图api完成了一个例子. API地址:http://developer.baidu.com/map/jsdemo. ...
- 百度地图api简单使用方法
百度地图API的使用方法 百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...
随机推荐
- OpenCV2.3.1在CentOS6.5下的安装
安装的linux版本号是centos6.5.选择的是opencv2.3.1.不是非常新的版本号. 由于在安装opencv2.4.9的时候.make的过程中出现了问题. 一:安装依赖包 依赖包用yum安 ...
- Awesome Adb——一份超全超详细的 ADB 用法大全【转】
本文转载自:https://juejin.im/entry/57c00fe4c4c971006179838a ADB,即 Android Debug Bridge,它是 Android 开发/测试人员 ...
- 关于js的值传递和引用传递
最近在弄一个东西,明明就很简单的.不知道为啥有个坑,双向绑定,不过当有个数组为空时,它不会发送空的数组,而是不发送.这就坑爹了.导致老是删不掉. 处理了下,改成验证为空时,发送'[]‘字符串.成功.但 ...
- window.name应用于浏览器端数据存储
本代码简单地分享利用window.name实现浏览器端数据存储: 1.在同一个页面一个地方设置window.name = "abc",另外一个地方读取window.name,自然能 ...
- mediaplayer state
enum media_player_states { MEDIA_PLAYER_STATE_ERROR = 0, MEDIA_PLAYER_IDLE = 1 << 0, MEDIA_PLA ...
- hdu-5719 Arrange(组合数学)
题目链接: Arrange Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) ...
- 使用cocoaPods加载框架的具体步骤:
注意事项: 1.使用之前备份一下代码.因为pod更新很快,如果某个文件名有中文,pod install 一下.整个项目可能就要废掉了. 2.如果不把pod文件推动到远程服务器. 每一次用的时候在本地p ...
- python中list用法及遍历删除元素
列表(list)是python的基本数据结构,list中每一个元素都分配一个位置索引,可以通过索引访问元素值,list不要求数据项有相同的数据类型. list初始化 list由一个方括号加内部由逗号分 ...
- BZOJ_1295_[SCOI2009]最长距离_dij
BZOJ_1295_[SCOI2009]最长距离_dij Description windy有一块矩形土地,被分为 N*M 块 1*1 的小格子. 有的格子含有障碍物. 如果从格子A可以走到格子B,那 ...
- public void与public static void区别
我们换个简单易懂的说法,这两句的区别就在于,能不能直接用类名访问. 很好理解的不是吗? 假如,我有一个类,如下图所示: 接下来先实例化一个对象,ca,你会发现它不仅可以访问普通的方法,也可以访问静态的 ...