DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 帶有定位當前位置的百度地圖前端web api實例代碼
帶有定位當前位置的百度地圖前端web api實例代碼
編輯:關於JavaScript     

廢話不多說,直接給大家貼代碼了,具體代碼如下所示,

關鍵代碼如下:

<!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> 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved