带有定位当前位置的百度地图前端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 相关文章推荐
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
js blob类型url的视频下载问题的解决
Nov 29 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简单的会话类代码
2011/08/08 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
初学JavaScript第二章
2008/09/30 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
python读取二进制mnist实例详解
2017/05/31 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Python多进程写入同一文件的方法
2019/01/14 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
python2 对excel表格操作完整示例
2020/02/23 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
财产保全担保书范文
2014/04/01 职场文书
服务承诺书怎么写
2014/05/24 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
天河观后感
2015/06/11 职场文书
复活读书笔记
2015/06/29 职场文书
新课程改革心得体会
2016/01/22 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
Java Spring Lifecycle的使用
2022/05/06 Java/Android