背景:最近在使用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);
});
});
2.
/*
* 创建地图并且转换坐标
*/
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.效果图: