星空网 > 软件开发 > 网页设计

带有定位当前位置的百度地图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='/images/loading.gif' data-original="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src='/images/loading.gif' data-original="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
<script type="text/javascript" src='/images/loading.gif' data-original="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 前端代码

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

这个获取评论的方法,你都弄明白了吗?:https://www.ikjzd.com/articles/109913
新手必备:35个亚马逊新手卖家必备的运营术语:https://www.ikjzd.com/articles/109914
做好这五点,亚马逊Q4的正确打开方式 !:https://www.ikjzd.com/articles/109915
战况速递:中东人民今年怎么过“黑五”?:https://www.ikjzd.com/articles/109916
亚马逊入门培训,哪些行为会导致账户被封!:https://www.ikjzd.com/articles/109917
速卖通影响产品排名的因素有哪些?怎样去优化提升?:https://www.ikjzd.com/articles/109918
如何从抖音上多挣钱?记住这12个字 :https://www.kjdsnews.com/a/1836445.html
连麦专家:2024年到底如何做小红书? :https://www.kjdsnews.com/a/1836446.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流