phonegap3.4 + 百度地图获取地址信息

最新推荐文章于 2018-03-27 14:53:00 发布

Freeplay

最新推荐文章于 2018-03-27 14:53:00 发布

阅读量3.8k

点赞数

分类专栏： LBS phonegap

本文链接：https://blog.csdn.net/dzy19832006/article/details/31372351

版权

phonegap 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

LBS

1 篇文章 0 订阅

订阅专栏

一、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引用脚本即可

Freeplay

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
phonegap3.4 + 百度地图获取地址信息

参考文章：http://chy2z.blog.163.com/blog/static/316688462013111894315993/http://www.oschina.net/code/snippet_945111_20394
复制链接

扫一扫

专栏目录