带有定位当前位置的百度地图前端web api实例代码
废话不多说，直接给大家贴代码了，具体代码如下所示，
关键代码如下：
<!DOCTYPEhtml>
<htmllang="zh-cn">
<head>
<metaname="viewport"content="initial-scale=1.0,user-scalable=no"/>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<styletype="text/css">
html{
height:100%;
}
body{
height:100%;
margin:0px;
padding:0px;
}
#container{
height:50%;
}
</style>
<scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<scriptsrc="http://api.map.baidu.com/api?v=1.4"type="text/javascript"></script>
<scripttype="text/javascript"src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script>
$(function(){
navigator.geolocation.getCurrentPosition(translatePoint);//定位
});
functiontranslatePoint(position){
varcurrentLat=position.coords.latitude;//经度
varcurrentLon=position.coords.longitude;//纬度
vargpsPoint=newBMap.Point(currentLon,currentLat);
BMap.Convertor.translate(gpsPoint,0,initMap);//转换坐标
}
functioninitMap(point){
//初始化地图
map=newBMap.Map("container");//实例化容器
map.addControl(newBMap.NavigationControl());//平移缩放控件
map.addControl(newBMap.ScaleControl());//比例尺控件
map.addControl(newBMap.OverviewMapControl());//缩略地图控件
map.centerAndZoom(point,15);//地图初始化，参数地图坐标和级别
map.addOverlay(newBMap.Marker(point));//当前位置加标记
varmyZoomCtrl=newZoomControl();
map.addControl(myZoomCtrl);
functionZoomControl(){
this.defaultAnchor=BMAP_ANCHOR_TOP_LEFT;//调整控件的位置
this.defaultOffset=newBMap.Size(10,10);//通过像素调整位置
}
//自定义控件，点击两下实现放大
ZoomControl.prototype=newBMap.Control();
ZoomControl.prototype.initialize=function(map){
vardiv=document.createElement("div");
div.appendChild(document.createTextNode("放大2级"));
div.style.cursor="pointer";
div.style.border="1pxsolidgray";
div.style.backgroundColor="white";
div.onclick=function(e){
map.zoomTo(map.getZoom()+2);
}
map.getContainer().appendChild(div);
returndiv;
}
}
</script>
</head>
<body>
<divid="container"></div>
</body>
</html>