带有定位当前位置的百度地图前端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 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
laypage分页控件使用实例详解
May 19 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
《APMServ 5.1.2》使用图解
2006/10/23 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
python根据文件大小打log日志
2014/10/09 Python
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
香港礼品网站:GiftU eshop
2017/09/01 全球购物
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
中医专业应届生求职信
2013/11/17 职场文书
求职信范文英文版
2014/01/05 职场文书
个人简历自我评价
2014/01/06 职场文书
学校卫生检查制度
2014/02/03 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
党员年终个人总结
2015/02/14 职场文书
创业计划书之熟食店
2019/10/16 职场文书
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang