带有定位当前位置的百度地图前端web api实例代码
作者：秦少66 时间：2024-05-08 10:11:56
废话不多说，直接给大家贴代码了，具体代码如下所示，
关键代码如下：
<!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>
标签：前端,web,api
0
投稿猜你喜欢
laravel接管Dingo-api和默认的错误处理方式
2023-11-21 23:29:37
python将ansible配置转为json格式实例代码
2023-11-03 02:32:51
3个适合新手练习的python小游戏
2023-08-02 02:12:27
BootStrap 动态添加验证项和取消验证项的实现方法
2023-08-13 14:17:57
Dreamweaver基础技巧全面接触
2010-03-25 12:23:00
Mysql数据库错误代码中文详细说明
2024-01-16 09:55:21
Go每日一库之quicktemplate的使用
2023-06-28 01:03:15
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2024-05-03 15:50:32
python logging通过json文件配置的步骤
2022-06-04 22:30:19
详解使用Selenium爬取豆瓣电影前100的爱情片相关信息
2021-12-04 10:52:23
python+ffmpeg批量去视频开头的方法
2021-07-07 16:10:01
ASP 一次下载网页中的所有资源
2008-04-18 13:04:00
Go使用协程批量获取数据加快接口返回速度
2024-05-21 10:23:38
python关闭print输出信息详情
2023-06-21 17:21:09
Python设计模式编程中Adapter适配器模式的使用实例
2023-11-16 10:02:15
js 复制功能 支持 for IE/FireFox/mozilla/ns
2024-05-11 09:34:59
python中enumerate函数遍历元素用法分析
2021-08-07 10:07:18
情人节快乐! python绘制漂亮玫瑰
2021-02-07 18:22:48
详解PyTorch预定义数据集类datasets.ImageFolder使用方法
2022-01-30 20:15:07
Python教程之基本运算符的使用(下)
2021-04-29 20:32:37