带有定位当前位置的百度地图前端web api实例代码


Posted in Javascript onJune 21, 2016

废话不多说,直接给大家贴代码了,具体代码如下所示,

关键代码如下:

<!DOCTYPE html> 
<html lang="zh-cn"> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style type="text/css">
html {
height:100%;
}
body {
height:100%;
margin:0px;
padding:0px;
}
#container {
height:50%;
}
</style> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script> 
<script>
$(function () {
navigator.geolocation.getCurrentPosition(translatePoint); //定位 
});
function translatePoint(position) {
var currentLat = position.coords.latitude;//经度
var currentLon = position.coords.longitude;//纬度
var gpsPoint = new BMap.Point(currentLon, currentLat);
BMap.Convertor.translate(gpsPoint, 0, initMap); //转换坐标 
}
function initMap(point) {
//初始化地图 
map = new BMap.Map("container");//实例化容器
map.addControl(new BMap.NavigationControl());//平移缩放控件
map.addControl(new BMap.ScaleControl());//比例尺控件
map.addControl(new BMap.OverviewMapControl());//缩略地图控件
map.centerAndZoom(point, 15);//地图初始化,参数地图坐标和级别
map.addOverlay(new BMap.Marker(point));//当前位置加标记
var myZoomCtrl = new ZoomControl();
map.addControl(myZoomCtrl);
function ZoomControl() {
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; //调整控件的位置
this.defaultOffset = new BMap.Size(10, 10);//通过像素调整位置
}
//自定义控件,点击两下实现放大
ZoomControl.prototype = new BMap.Control();
ZoomControl.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("放大2级"));
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
div.onclick = function (e) {
map.zoomTo(map.getZoom() + 2);
}
map.getContainer().appendChild(div);
return div;
}
}
</script> 
</head> 
<body> 
<div id="container"></div>
</body> 
</html>
Javascript 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
推荐20家国外的脚本下载网站
Apr 28 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 #Javascript
纯JS前端实现分页代码
Jun 21 #Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 #Javascript
jQuery代码性能优化的10种方法
Jun 21 #Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 #Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 #Javascript
JavaScript检测原始值、引用值、属性
Jun 20 #Javascript
You might like
如何使用PHP中的字符串函数
2006/11/24 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
银行求职推荐信范文
2013/11/30 职场文书
商务邀请函范文
2014/01/14 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
服装设计专业自荐信
2014/06/17 职场文书
大学活动总结模板
2014/07/10 职场文书
2014年手术室工作总结
2014/11/26 职场文书
围城读书笔记
2015/06/26 职场文书
七一表彰大会简报
2015/07/20 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python