hybird app中使用百度地图定位并获得详细地址（逆地址解析）

最新推荐文章于 2024-07-18 19:20:39 发布

yangyuscript

最新推荐文章于 2024-07-18 19:20:39 发布

阅读量2k

点赞数 1

分类专栏： Hbuilder mui 文章标签： javaWeb 百度地图 app

本文链接：https://blog.csdn.net/yangyuscript/article/details/71036580

版权

Hbuilder mui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

背景：最近在使用hbuilder mui做的一个hybird app，其中使用到百度地图去定位并且获得详细地址
解决思路：首先，mui中提供了百度地图和高德地图的sdk，但是我觉得需求还没必要去配置sdk的程度，直接使用了浏览器的定位，如果你需要配置sdk的不妨看看这篇文章
http://www.bcty365.com/content-146-5084-1.html，我没有配置sdk直接用的浏览器的定位 参考：
http://www.54gcs.cn/program/javascript/30225.html             百度地图api：http://developer.baidu.com/map/jsdemo.htm#i8_1
上代码：html的很简单

<div id="allmap"></div>

下面js代码：

1.这段代码是在mui中使用的，如果你是纯网页jq的话直接在$(function(){});中写吧，把plus换成navigator即可

mui.plusReady(function() {
			//切记preload要在plusReady加载完之后调用
			plus.geolocation.getCurrentPosition(translatePoint, function(e) {
				mui.toast("异常:" + e.message);
			});
});

/*
		 * 创建地图并且转换坐标
		 */
		function translatePoint(position) {
			var currentLon = position.coords.longitude;
			var currentLat = position.coords.latitude;
			var gpsPoint = new BMap.Point(currentLon, currentLat);
			//开始地址逆解析，显示自己当前的地点
			var geoc=new BMap.Geocoder();
			geoc.getLocation(gpsPoint,function(rs){
				var addComp=rs.addressComponents;
				//alert(addComp.province+","+addComp.city+","+addComp.district+","+addComp.street+","+addComp.streetNumber);
			    var userLocation=addComp.province+" "+addComp.city+" "+addComp.district+" "+addComp.street+" "+addComp.streetNumber+"  ";
			    document.getElementById("currentLocation").innerText=userLocation;
			    document.getElementById("probleminfo").innerText=userLocation;
			});
			//结束地址逆解析
			BMap.Convertor.translate(gpsPoint, 2, initMap); //坐标转换
		}

		function initMap(point) {
			map = new BMap.Map("allmap"); //创建地图
			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));

		}

3.效果图：