地图插件

做定位功能时,使用过的两种api。

一、高德地图定位

1、html

//key通过官网申请获取
<
script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=d4073a5fd43313dffaea42125fe7ed"></script> <script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>

2、js

//加载地图,调用浏览器定位服务
var geolocation;
var map = new AMap.Map('container',{
  resizeEnable: true
});
//加载地图,调用浏览器定位服务
map.plugin('AMap.Geolocation', function() {
  geolocation = new AMap.Geolocation({
    enableHighAccuracy: true,//是否使用高精度定位,默认:true
    timeout: 10000,          //超过10秒后停止定位,默认:无穷大
    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
    zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
    buttonPosition:'RB',
  });
  map.addControl(geolocation);
  geolocation.getCurrentPosition();
  AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
  AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
});
//解析定位结果
function onComplete(data) {
  that.placeText = data.formattedAddress;
  that.siteimg = '../../static/images/icon_site-11.svg';
  if(data.accuracy){}
};
function onError(data) {
  console.log(data)
  that.placeText = '无法定位';
}

二、百度地图定位

1、html

//ak通过官网申请获取
<
script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=9Go7sY3WRmc9WnQw8FtMyiDGjlmocg"></script>

2、js

//创建百度地图控件
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
  if(this.getStatus() == BMAP_STATUS_SUCCESS){
    console.log(r);
    //以指定的经度与纬度创建一个坐标点
    var pt = new BMap.Point(r.point.lng,r.point.lat);
    console.log(pt);
    //创建一个地理位置解析器
    var geoc = new BMap.Geocoder();
    geoc.getLocation(pt, function(rs){//解析格式:城市,区县,街道
      console.log(rs)
      var addComp = rs.address;
      that.placeText = addComp;
    });
  }else{
    that.placeText = '定位失败';
  }
},{enableHighAccuracy: true})//指示浏览器获取高精度的位置,默认false
问题:安卓机定位不准确,获取的经纬度不准确,苹果准确。

posted @ 2022-06-07 16:58  凝子  阅读(124)  评论(0编辑  收藏  举报