前言
我是一个前端小菜鸡,第一次写文章,觉得有必要写一下这种博客文章来记录一下我的前端成长之路。如果文章中有错误也欢迎各位大佬在评论区指出,我很希望各位大佬能够指出我的不足。
背景
我最近负责了一个项目,项目中需要用到定位的功能,在做这个功能的时候真的是一波三折,我跟大家聊一聊我的曲折之路吧,也为了有需要的小伙伴走出误区。
一开始我是选用了expo里已经集成好的expo-location,在我运行官网的demo的时候出现了问题,无论在android真机和android模拟器上运行都是获取不到定位的(android真机和模拟器上的定位功能都已经打开,权限也打开了,但就是运行不出来),我找遍了各种解决办法就是解决不了,后来我又在苹果真机和ios模拟器上运行都没有问题,所以我觉得这是一个版本的问题吧,反正最后也没有解决得了,欢迎各位大佬能够给出解决方案(在后面我会给出我所使用到的技术版本)。
第二次我选用了react-native-amap3d和react-native-amap-geolocation结合native modules去集成高德地图,最后还是以失败告终,还是版本问题(报错链接:react-native-amap3d),我所使用的是"react-native": "0.72.10","react-native-amap-geolocation": "^1.2.3","react-native-amap3d": "^3.2.4",希望各位大佬能够给出一个完美的解决方案。
最后一次我在react native中使用webview实现腾讯地图定位功能。
版本
json
"expo": "~49.0.15",
"react-native": "0.72.10",
"react-native-webview": "13.2.2",
"react": "18.2.0",
"react-dom": "18.2.0",
程序实现
在获取腾讯地图api的时候一定要勾选WebServiceAPI,然后填上qq.com,要不然在获取定位列表的时候就会获取不到信息。
js
import WebView from "react-native-webview";
const Page = () => {
let webView: any;
// 腾讯选点组件文档
// https://lbs.qq.com/webApi/component/componentGuide/componentPicker
return (
<WebView
ref={view => (webView = view)}
javaScriptEnabled={true}
source={{
uri: 'https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=腾讯地图api&referer=myapp',
}}
onMessage={event => {
console.log(event);
console.log(JSON.parse(event.nativeEvent.data));
console.log(JSON.stringify(event.nativeEvent.data))
const data = JSON.parse(event.nativeEvent.data);
if (data?.poiaddress) {
console.log("POI Address:", data?.poiaddress);
}
}}
onLoadEnd={() => {
webView.injectJavaScript(
"window.addEventListener('message', function(event) {window.ReactNativeWebView.postMessage(JSON.stringify(event.data));}, false);",
);
}}
/>
);
}
export default Page
代码可以直接复制使用,只需要将腾讯地图api给替换掉你自己注册的api即可使用。上面只是实现了一个定位的功能,如果想要实现其他功能,自己去查找其他资料吧。
总结
第一次写文章,大家看到不要喷太厉害,如果大家有更好的建议去实现定位功能非常欢迎在评论区上讨论,大家一起进步,一起学习。