phonegap3.4 + 百度地圖獲取地址信息

一、js方式實現

參考文章:

http://chy2z.blog.163.com/blog/static/316688462013111894315993/

http://www.oschina.net/code/snippet_945111_20394


首先創建一個應用,應用類別選擇移動端

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ak值"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<title>GPS轉百度</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

// 百度地圖API功能
//GPS座標
var xx = 116.397428;
var yy = 39.90923;
var gpsPoint = new BMap.Point(xx,yy);

//地圖初始化
/*var bm = new BMap.Map("allmap");
bm.centerAndZoom(gpsPoint, 15);
bm.addControl(new BMap.NavigationControl());

//添加谷歌marker和label
var markergps = new BMap.Marker(gpsPoint);
bm.addOverlay(markergps); //添加GPS標註
var labelgps = new BMap.Label("我是GPS標註哦",{offset:new BMap.Size(20,-10)});
markergps.setLabel(labelgps); //添加GPS標註
*/

//座標轉換完之後的回調函數
translateCallback = function (point){
    /*var marker = new BMap.Marker(point);
    bm.addOverlay(marker);
    var label = new BMap.Label("我是百度標註哦",{offset:new BMap.Size(20,-10)});
    marker.setLabel(label); //添加百度label
    bm.setCenter(point);
    alert(point.lng + "," + point.lat);*/
	var gc = new BMap.Geocoder();   
    gc.getLocation(point, function(rs){
		var addComp = rs.addressComponents;
		alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);
	});
}

setTimeout(function(){
    BMap.Convertor.translate(gpsPoint,0,translateCallback);     //真實經緯度轉成百度座標
}, 2000);
</script> 

2、web服務方式實現

參考文章:

ip轉換:http://developer.baidu.com/map/changeposition.htm

地址解析:http://developer.baidu.com/map/webservice-geocoding.htm


首先創建一個應用,應用類別選擇服務端
參考:http://developer.baidu.com/map/webservice-geocoding.htm

座標轉百度座標:http://api.map.baidu.com/geoconv/v1/?coords=116.3594337,39.9840182&from=1&to=5&ak=ak值
座標轉實際地址:http://api.map.baidu.com/geocoder/v2/?ak=<span style="font-family: Arial, Helvetica, sans-serif;">ak值</span><span style="font-family: Arial, Helvetica, sans-serif;">&location=39.9840182,116.3594337&output=json&pois=0</span>


注:每個應用類別對應的ak值不同,不同類型的服務,選擇對應的ak值


3、phonegap+百度

首先導入兩個js

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ak值"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

獲取詳細地址信息js

var latitude,longitude;
navigator.geolocation.getCurrentPosition(function(position) {
	latitude = position.coords.latitude;
	longitude = position.coords.longitude;
	var gpsPoint = new BMap.Point(longitude,latitude);
	BMap.Convertor.translate(gpsPoint,0,function (point){
		var gc = new BMap.Geocoder();
		gc.getLocation(point, function(rs){
			var addComp = rs.addressComponents;
			alert("result::::::   " + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);
		});
	});
}, function(error) {
	alert('code: '    + error.code    + '\n' +
			'message: ' + error.message + '\n');
});

注:可以將上面的腳本標籤內的src值下載到本地,製作一個js文件,由app引用腳本即可

發佈了34 篇原創文章 · 獲贊 7 · 訪問量 17萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章