「前端」在React中使用百度地图API

本文链接： https://blog.csdn.net/qq_26377547/article/details/89058721

最近在项目开发的过程中，遇到了要获取经纬度的问题，由于本人菜的一批，多方询问的情况下，得到了思否大佬@asseek的解答，找到了百度地图的相关API，写个博客记录一下用法备忘。
原问题链接：https://segmentfault.com/q/1010000018770746?_ea=9268580
最近参与的一个项目开发中要求获取到一个仓库的经纬度，在整个项目是使用React框架的，废话不多数，直接上教程：

使用React官方的脚手架工具创建React项目（这个应该不用多说了）
查看百度地图JavaScript API，链接：http://lbsyun.baidu.com/index.php?title=jspopular
点击“立即使用”进入到开发者平台，点击创建应用，申请一个AK密钥
选择浏览器端，勾选JavaScript API，如果暂时不知道如何设置白名单，可以填入一个*号
申请成功后会得到一个AK密钥，复制这个AK密钥，到这一步你就可以进入React项目中取写代码了
首先，找到public/index.html文件，在<body>···</body>中引入百度地图API

<body>
	<script
		type="text/javascript"
		src="http://api.map.baidu.com/api?v=2.0&ak='这里填写你的密钥">
	</script>
</body>

到这一步我们已经在React项目中引入了百度地图的API，那么应该怎么使用呢？

初学React的同学可能会想到使用import的方式导入，但是这里你会发现，如果你直接导入就会报错，解决办法分两种：

第一种：用Window对象保存BMap变量，实现HTML文件和JS文件间的变量传递：
在刚才的HTML的body中再加入一段代码：

<body>
	<script
		type="text/javascript"
		src="http://api.map.baidu.com/api?v=2.0&ak='这里填写你的密钥">
	</script>
	<script>
		window.BMap = BMap
	</script>
</body>

将BMap对象保存到全局对象window中，需要使用的时候在将他从全局对象window中取出来：

const BMap = window.BMap;
const myGeo = new BMap.Geocoder();// 此处是百度地图提供的获取地址经纬度信息的API

这个API的用法如下：
在这里插入图片描述
链接：http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a7b27
不过我相信有部分人跟我一样看不懂这个文档，于是我决定举个例子：

const myGeo = new BMap.Geocoder();
myGeo.getPoint('北京市海淀区上地10街10号', (point) => {
  if (point) {
    // 这个point就是解析地址获得的百度地图坐标系
    console.log(point); // {lat: 40.057339, lng: 116.306941}
  } else {
    console.log('解析失败');
  }
}, '北京市');

不过实际应用的过程中我发现第三个参数好像可以跟第一个参数一样：

const myGeo = new BMap.Geocoder();
myGeo.getPoint('长沙市', (point) => {
  if (point) {
    console.log(point); // {lng: 112.945473, lat: 28.234889}
  } else {
    console.log('解析失败');
  }
}, '长沙市');

应该是百度地图的API会对参数进行解析

第二种：通过webpack的externals加载BMap使它可以通过require或import引入

到webpack.config.js中

module.exports = {
/*此处省略了entry，output,modules等配置*/
  externals:{
    'BMap':'BMap'
  },
}

在使用的过程中就可以直接使用import的方式引入：

import BMap from 'BMap'
const myGeo = new BMap.Geocoder(); // 调用Geocoder()

参考博客：https://www.cnblogs.com/softidea/p/6946779.html

「前端」在React中使用百度地图API

猜你喜欢