① html5應用 調用百度地圖API 為什麼在手機端
最近項目需要,稍微研究一下html5獲取當前地理位置的問題。
獲取當前位置的經緯度很簡單,一句代碼就搞定
[javascript]view plain
navigator.geolocation.getCurrentPosition(function(position){
longitude=position.coords.longitude;
latitude=position.coords.latitude;
});
[javascript]view plain
varmap=newBMap.Map("allmap");<prename="code"class="javascript">varpoint=newBMap.Point(longitude,latitude);<prename="code"class="javascript">vargeoc=newBMap.Geocoder();
[javascript]view plain
geoc.getLocation(point,function(rs){
varaddComp=rs.addressComponents;
alert(addComp.province+","+addComp.city+","+addComp.district+","+addComp.street+","+addComp.streetNumber);
});
一開始以為是html5獲取經緯度的偏差問題,然而並不是
然後開始查資料,求助強大的度娘,然後無意中發現了一個叫做坐標轉換的東西,一搜索才知道,原來網路地圖對坐標進行了深度封裝,必須通過他提供的介面進行坐標轉換才行
(當然了,還是因為我以前沒接觸過網路地圖,所以不知道這點知識,常用網路地圖api的應該對這個很熟悉的吧)
好了,廢話不多說,上最終代碼吧
[javascript]view plain
varmap=newBMap.Map("allmap");
varlongitude,latitude;
navigator.geolocation.getCurrentPosition(function(position){
longitude=position.coords.longitude;
latitude=position.coords.latitude;
});
setTimeout(function(){
vargpsPoint=newBMap.Point(longitude,latitude);
BMap.Convertor.translate(gpsPoint,0,function(point){
vargeoc=newBMap.Geocoder();
geoc.getLocation(point,function(rs){
varaddComp=rs.addressComponents;
alert(addComp.province+","+addComp.city+","+addComp.district+","+addComp.street+","+addComp.streetNumber);
});
});
},3000);
[html]view plain
<scripttype="text/javascript"src="http://api.map..com/api?v=2.0&ak=秘鑰"></script>
<scripttype="text/javascript"src="http://developer..com/map/jsdemo/demo/convertor.js"></script>
② 關於百度地圖API的問題
網路地圖 API中,初始有設置地圖中心位置的。設定好就OK。
③ 下面代碼提示convertor.js語法錯誤,請高手修改,高分懸賞
http://dev..com/wiki/static/map/API/examples/script/convertor.js 這個地址改了,換成這個試試
http://developer..com/map/jsdemo/demo/convertor.js 我也是才發現的,這是個demo的地址,不知道有沒有常用地址.
④ 在百度地圖api,經緯度怎麼轉換成百度坐標
//經緯度坐標
var x = 116.32715863448607;
var y = 39.990912172420714;
var ggPoint = new BMap.Point(x,y);
//坐標轉換完之後的回調函數
translateCallback = function (data){
if(data.status === 0) {
var marker = new BMap.Marker(data.points[0]);
//data.points[0])就是轉換後的網路坐標
}
}
//坐標轉換
setTimeout(function(){
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 1, 5, translateCallback)
}, 1000);
⑤ html5 v2.0百度地圖手機觸屏縮放地圖
網路搜索下「網路地圖生成器」,裡面都有你想要的縮放,可以選擇的。
有疑問可以繼續問,望採納!
⑥ 我在一個頁面,調用了百度地圖的API,我整到一個js文件內,但是同頁面的另一個js特效卻沒用了
把引入文件的鏈接代碼,放在最下面
⑦ 點擊按鈕顯示百度地圖 js如何實現 在html裡面 不是jsp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5定位</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map..com/api?v=2.0&ak=wqBXfIN3HkpM1AHKWujjCdsi"></script>
<script type="text/javascript" src="http://developer..com/map/jsdemo/demo/convertor.js"></script>
<style type="text/css">
*{ margin: 0px; padding: 0px;}
body{text-align: center; height: 100%;overflow:hidden;}
#allmap{ width: 100%;height: 100%; position: absolute;}
</style>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
$(function(){
if(supportsGeoLocation()){
alert("你的瀏覽器支持 GeoLocation.");
}else{
alert("不支持 GeoLocation.")
}
// 檢測瀏覽器是否支持HTML5
function supportsGeoLocation(){
return !!navigator.geolocation;
}
// 單次位置請求執行的函數
function getLocation(){
navigator.geolocation.getCurrentPosition(mapIt,locationError);
}
//定位成功時,執行的函數
function mapIt(position){
var lon = position.coords.longitude;
var lat = position.coords.latitude;
// alert("您位置的經度是:"+lon+" 緯度是:"+lat);
var map = new BMap.Map("allmap");
var point = new BMap.Point(""+lon+"",""+lat+"");
map.centerAndZoom(point,19);
var gc = new BMap.Geocoder();
translateCallback = function (point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
map.setCenter(point);
gc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
if(addComp.province!==addComp.city){
var sContent =
"<div><h4 style='margin:0 0 5px 0;padding:0.2em 0'>你當前的位置是:</h4>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber+"</p>" +
"</div>";}
else{
var sContent =
"<div><h4 style='margin:0 0 5px 0;padding:0.2em 0'>你當前的位置是:</h4>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+ addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber+"</p>" +
"</div>";
}
var infoWindow = new BMap.InfoWindow(sContent);
map.openInfoWindow(infoWindow,point);
});
}
BMap.Convertor.translate(point,0,translateCallback);
}
// 定位失敗時,執行的函數
function locationError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}
// 頁面載入時執行getLocation函數
window.onload = getLocation;
})
</script>
</body>
</html>