带有定位当前位置的百度地图前端web api实例代码
更新时间：2016年06月21日 09:49:24 作者：秦少66
这篇文章主要介绍了带有定位当前位置的百度地图前端web api实例代码 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
废话不多说，直接给大家贴代码了，具体代码如下所示，
关键代码如下：
<!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>
相关文章
Object.keys()、Object.values()、Object.entries()用法总结
本文主要介绍了Object.keys()、Object.values()、Object.entries()用法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
本文通过实例给大家详细介绍了get post jsonp三种数据交互形式，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-08-08
JavaScript 语言的核心部分足够大,以至于我们很容易误解其某些部分的工作方式,本文就来和大家一起讨论下为什么JS中的 every()对空数组总返回 true,需要的可以参考下2023-09-09
iframe src为图片时的高度自适应的代码...2007-10-10
这篇文章主要给大家介绍了关于如何在现代JavaScript中编写异步任务的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这两天在做Web前端时，遇到需求通过js实现文本复制的功能。经过一番测试，终于实现了出来，有需要的小伙伴可以参考下。2015-04-04
ie8 不支持new Date(2012-11-10)问题的解决方法
使用JS的时候也碰到了如下问题，后来经过修改，在IE8环境里，下面的代码是可用的，下面与大家分享下ie8 不支持new Date的解决方法，有类似问题的朋友可以参考下2013-07-07
本文主要是向大家详细的对比分析了javascript中局部变量和全局变量的区别，是篇非常不错的文章，值得仔细去品读，推荐给小伙伴们。2015-02-02
这篇文章主要介绍了JSP中如何使用JavaScript动态插入删除输入框,需要的朋友可以参考下2014-06-06
前一段做音乐和链接保存项目时用到了UserData，现在上线后效果不错，就把UserData的一些用法总结出来，大家一同分享。2010-07-07
最新评论