带有定位当前位置的百度地图前端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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
Javascript 入门基础学习
Mar 10 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
vue实现tab栏点击高亮效果
Aug 19 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
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python连接sql server乱码的解决方法
2013/01/28 Python
Python迭代器和生成器介绍
2015/03/06 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
金宝贝童装官网:Gymboree
2016/08/31 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
信用卡工资证明格式
2014/09/13 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
幼师大班个人总结
2015/02/13 职场文书
后勤工作个人总结
2015/02/28 职场文书
中学教师教学工作总结
2015/08/13 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS