React项目如何利用百度地图API获取地理位置

作者 : 开心源码本文共912个字，预计阅读时间需要3分钟发布时间： 2022-05-12 共244人阅读

在public文件夹下找到index.html,而后加入下面的代码

<html><head>     <meta http-equiv="Access-Control-Allow-Origin" content="*"/></head> <body></body><script src="http://api.map.baidu.com/api?v=2.0&ak=4IU3oIAMpZhfWZsMu7xzqBBAf6vMHcoa">//ak后面是你自己的apikey    </script>    <script>      var geolocation = new BMap.Geolocation();      geolocation.getCurrentPosition(function(r){        if(this.getStatus() == BMAP_STATUS_SUCCESS){          var mk = new BMap.Marker(r.point);          console.log(r.point);          window.lat=r.point.lat;   //window.lat是在其余页面设置的全局变量          window.lng=r.point.lng;   //window.lng是在其余页面设置的全局变量        }        else {          alert('failed'+this.getStatus());        }              },{enableHighAccuracy: true});    </script> </html>

在其它页面想要获取到这个地理位置的信息从而进行解决

可以采用全局变量的方式，由于放在react的html和其余js文件是同时执行的，所以在其余页面请求的时候可能获取不到值，所以用延时器的方式能够获取到

window.lat=undefined;window.lng=undefined;class PunchCard extends Component{componentDidMount(){ //获取两个值放在这个生命周期中，利用延时器即可以取到值    setTimeout(() => {            console.log(window.lat);            console.log(window.lng);        },2000); }}export default PunchCard;

全局变量延时器放在是在页面

说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » React项目如何利用百度地图API获取地理位置

分享到：