帶有定位當(dāng)前位置的百度地圖前端web api實(shí)例代碼
更新時(shí)間：2016年06月21日 09:49:24 作者：秦少66
這篇文章主要介紹了帶有定位當(dāng)前位置的百度地圖前端web api實(shí)例代碼 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
廢話(huà)不多說(shuō)，直接給大家貼代碼了，具體代碼如下所示，
關(guān)鍵代碼如下：
<!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;//經(jīng)度
var currentLon = position.coords.longitude;//緯度
var gpsPoint = new BMap.Point(currentLon, currentLat);
BMap.Convertor.translate(gpsPoint, 0, initMap); //轉(zhuǎn)換坐標(biāo)
}
function initMap(point) {
//初始化地圖
map = new BMap.Map("container");//實(shí)例化容器
map.addControl(new BMap.NavigationControl());//平移縮放控件
map.addControl(new BMap.ScaleControl());//比例尺控件
map.addControl(new BMap.OverviewMapControl());//縮略地圖控件
map.centerAndZoom(point, 15);//地圖初始化，參數(shù)地圖坐標(biāo)和級(jí)別
map.addOverlay(new BMap.Marker(point));//當(dāng)前位置加標(biāo)記
var myZoomCtrl = new ZoomControl();
map.addControl(myZoomCtrl);
function ZoomControl() {
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; //調(diào)整控件的位置
this.defaultOffset = new BMap.Size(10, 10);//通過(guò)像素調(diào)整位置
}
//自定義控件，點(diǎn)擊兩下實(shí)現(xiàn)放大
ZoomControl.prototype = new BMap.Control();
ZoomControl.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("放大2級(jí)"));
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>
相關(guān)文章
JavaScript實(shí)現(xiàn)簡(jiǎn)單MD5加密的腳本分享
MD5信息摘要算法是一種被廣泛使用的密碼散列函數(shù)，可以產(chǎn)生出一個(gè)128位（16字節(jié)）的散列值（hash value），用于確保信息傳輸完整一致。本文將用JavaScript實(shí)現(xiàn)簡(jiǎn)單MD5加密，感興趣的可以了解一下2022-10-10
Javascript ParentNode和ChildNode接口原理解析
這篇文章主要介紹了Javascript ParentNode和ChildNode接口原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03
手機(jī)圖片預(yù)覽插件photoswipe.js使用總結(jié)
這篇文章主要為大家詳細(xì)總結(jié)了手機(jī)圖片預(yù)覽插件photoswipe.js使用方法，感興趣的小伙伴們可以參考一下2016-08-08
JS獲取鼠標(biāo)坐標(biāo)、獲取鼠標(biāo)像素點(diǎn)示例
運(yùn)行代碼之后隨意移動(dòng)鼠標(biāo)的位置，可適時(shí)顯現(xiàn)鼠標(biāo)的坐標(biāo)點(diǎn)，不占用系統(tǒng)資源2014-03-03
JavaScript?數(shù)據(jù)結(jié)構(gòu)之集合創(chuàng)建(1)
這篇文章主要介紹了JavaScript?數(shù)據(jù)結(jié)構(gòu)之集合創(chuàng)建，集合是由一組無(wú)序且唯一的元素組成。數(shù)據(jù)結(jié)構(gòu)中的集合，對(duì)應(yīng)的是數(shù)學(xué)概念當(dāng)中的有限集合；下文詳細(xì)介紹需要的小伙伴可以參考一下2022-04-04
JS實(shí)現(xiàn)固定時(shí)間點(diǎn)執(zhí)行某任務(wù)的代碼示例
在Web前端開(kāi)發(fā)中,有時(shí)我們需要在特定的時(shí)間點(diǎn)執(zhí)行某些任務(wù),例如每日定時(shí)發(fā)送數(shù)據(jù)報(bào)告、每小時(shí)更新一次用戶(hù)界面等,JavaScript 提供了多種方法來(lái)實(shí)現(xiàn)這一需求,本文將詳細(xì)介紹如何使用這些工具和技術(shù),并通過(guò)豐富的代碼示例展示其具體應(yīng)用,需要的朋友可以參考下2025-02-02
JavaScript中Array.from()的用法總結(jié)
本文主要介紹了JavaScript中Array.from()的用法總結(jié)2023-05-05
JavaScript是否可實(shí)現(xiàn)多線(xiàn)程 深入理解JavaScript定時(shí)機(jī)制
JavaScript的setTimeout與setInterval是兩個(gè)很容易欺騙別人感情的方法,因?yàn)槲覀冮_(kāi)始常常以為調(diào)用了就會(huì)按既定的方式執(zhí)行, 我想不少人都深有同感,2009-12-12
用YUI做了個(gè)標(biāo)簽瀏覽效果...2007-02-02
List all the Databases on a SQL Server
List all the Databases on a SQL Server...2007-06-06