关于react实现定位———navigator.geolocation与腾讯地图

December 07, 2020 2468

本来想用html5的新API navigator.geolocation 来实现获取用户的经纬度的。

MDN中介绍的语法＋例子

1
navigator.geolocation.getCurrentPosition(success, error, options)

参数是回调函数，好像调用一下成功的回调函数就可以获得数据啦（￣▽￣）。然鹅，实际就算你去跑官网的例子，一样不行，返回错误信息如下：

1
ERROR(3): Timeout expired

为啥超时了呢，搜了一波发现有个解释：因为部分浏览器使用的谷歌的定位服务，而谷歌服务在中国被墙了，所以要么定位非常非常慢，也非常非常不准，要么直接无法定位。。。。

所以放弃使用geolocation来获取经纬度，准备用腾讯地图的API来获取。

react中引入腾讯地图

但是腾讯地图官网的例子，直接在react项目中使用，直接报错，qq对象不存在。

第一种方法：

首先，需要在react中的webpack中设置：

1
2
3
4
5
module.exports = {
  externals:{
    'QMap':'qq.maps'
  },
 }

然后引用

1
import QMap from 'QMap'

直接使用

1
new QMap.Map(this.refs.map, this.props.options)

我自己是webpack4.44.2版本的，需要注意的是module.exports变成了这样

1
2
3
4
5
6
7
8
module.exports = function (webpackEnv) {//由对象变成了函数
	...
	return{//在return中配置
	//entry:...
	//output:...
	externals:{...}
	}
}

其中，如果我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。

或者直接npm i qqmap，引入依赖。

第二种方法

用Window对象保存QMap变量，实现HTML文件和JS文件间的变量传递

先引入脚本

1
2
3
4
<script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=UQPBZ-RCU36-K2YS3-EMV6Y-JI6JJ-3WBUM&referer=myapp&callback=showPosition"></script>
   <script>
        window.QMap = qq.maps;
   </script>

将QMap对象保存到全局可访问的window对象中，使用方法如下

1
let QMap=window.QMap

image-20201207171947614

我在项目中使用new qq.maps.Geocoder就会报错，后来查看文档发现了可以自动获取IP地址进行定位👍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   let  citylocation = new qq.maps.CityService();
    //请求成功回调函数
    citylocation.setComplete(function(result) {
        let a= JSON.parse(JSON.stringify(result.detail.latLng))
        console.log(a);
        let {lat,lng}= a;
        console.log(lat+','+lng)
   this.setState({
        location:lat+','+lng
    })
    });
    //请求失败回调函数
    citylocation.setError(function() {
        alert("出错了，请输入正确的经纬度！！！");
    });
    citylocation.searchLocalCity();
})

控制台成功输出经纬度

image-20201207182219241

由于使用IP定位会出现定位不准的情况，所以还是得使用腾讯前端定位组件，在react中使用。

我的项目中，react项目创建的index在public里面，所以在public/index.html中引入script标签实现跨域。

1
2
3
4
5
6
7
8
9
let QMap=window.QMap
let geolocation=new QMap.Geolocation()
geolocation.getLocation(showPosition, showErr);
function showPosition(position) {
    console.log(JSON.stringify(position)) 
};
function showErr() {
  console.log("err!!!!")
};

然鹅，发现一个很诡异的问题，成功拿到了返回的数据，但是一直走失败逻辑！！！！我设置了callback都无用。

在搜了一波之后，官网的FAQ其实就告诉我了👇

image-20201209145231855

因为我本地创建的react项目默认走的是http协议，所以要升级为https。方法见下篇文章。

查看评论