当前位置: 首页 > 编程笔记 >

带有定位当前位置的百度地图前端web api实例代码

叶嘉颖
2023-03-14
本文向大家介绍带有定位当前位置的百度地图前端web api实例代码,包括了带有定位当前位置的百度地图前端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> 
 类似资料:
  • 本文向大家介绍基于JavaScript定位当前的地理位置,包括了基于JavaScript定位当前的地理位置的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js定位当前地理位置的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 问题内容: 我正在开发一个包含3个活动的android应用程序,其中一个是map。我正在使用谷歌地图 我想要的是: 当用户打开活动(地图)时,它将向用户显示她的位置而不是坐标。 用户还应该能够通过使用大头针定位(固定)任何地方,而我的应用程序必须将此大头针的坐标存储在变量中,以便以后使用。 这是CustomPinpoint类 问题答案: 我已经实现了您想要的相同的东西。我为您提供示例代码。在这种情

  • 问题内容: 因此,我已经能够通过开发人员的android页面获取我当前位置的定期更新,从而使您的应用知道位置。现在,只要我的位置发生变化,我就可以获取该位置的纬度和经度。但是,谁可以在Google Maps中实现呢? 下面的这一行在地图上实现了一个按钮,该按钮可找到我的当前位置并在其上放置一个蓝点/标记(不接收定期更新) mMap.setMyLocationEnabled(true); 我应该在活

  • 问题内容: 最后,我成功显示了地图,现在,我想显示我的当前位置,我尝试使用这些代码,但是当我单击右上角的我的位置按钮时,它不起作用。 AndroidManifest.xml MapsActivity.java 问题答案: 将此代码用于当前位置:

  • 我可以找到当前位置的经纬度,但是这些数据在改变我的当前位置之前是不显示的,我想在不改变我的位置的情况下得到当前位置的经纬度。 因为这段代码从onLocationChanged(Location loc)方法返回数据,所以在安装到我的设备上之后,如果不改变我的位置,我就无法获得数据。但是我需要纬度,经度,而不改变我的位置。这可能吗?请给出一个解决方案