React中使用百度地图——基本使用

 我来答
顺畅且平实灬布丁7942
2022-07-22 · TA获得超过3689个赞
知道小有建树答主
回答量:2218
采纳率:98%
帮助的人:137万
展开全部

  官方文档: http://lbsyun.baidu.com/index.php?title=jspopular

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。

  百度地图JavaScript API支持HTTP和HTTPS,免费对外开放,可直接使用。接口使用无次数限制。在使用前,您需先 申请密钥(ak) 才可使用。在您使用百度地图JavaScript API之前,请先阅读 百度地图API使用条款 。任何非营利性应用请直接使用,商业应用请参考 使用须知 。

  首先,在 index.html 中添加:

  然后,在脚手架中组件化。如果使用webpack打包,则在 webpack.base.config.js 中添加以下配置;

  最后,在组件中引用:

1、初始化地图
  这里使用MapBD组件来封装百度地图,使用组件内导入方式来导入百度地图js,在this.asyncLoading()中调用初始化方法:this.initMap()

2、添加控件
 百度地图提供的控件:

  添加自带的定位控件:

  注意:有些公司网关会禁用百度地图定位接口,导致定位失败。

3、自定义定位功能
  百度地图自带的定位控件一般不满足UI需求,需要自定义定位控件和定位功能。

4、智能搜索
  根据地名从百度地图中检索地址。

5、添加覆盖物
  可以使用map.addOverlay方法向地图添加覆盖物,使用map.removeOverlay方法移除覆盖物,注意此方法不适用于InfoWindow。

  百度地图API支持添加覆盖物,但是使用自定义图标时,一般需要设置偏移。

待续.....

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式