项目需要:在vue项目中加入百度地图,花费了一上午的时间,最后总结如下:

第一种:百度地图JavaScript API文档

【JavaScript API在vue中的具体使用方法,在我的另一篇博客中有介绍,博客链接在下方】

简介:百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,是百度目前为止最功能插件最齐全的一个有关地图的网站

官方地址地图 JS API | 百度地图API SDK

使用方法:两种使用方法

      (1)第一种:直接加载

      (2)第二种:异步加载

优点:功能多,给提供的可用的插件多

缺点:因为是针对js,而不是针对vue的,所以需要自己封装

第二种:使用Vue Baidu Map

简介:这种是针对vue框架的一种地图【使用方法很简单,跟着官网走就可以了】

官网地址Vue Baidu Map

使用方法:直接npm下载依赖就可以

优点:针对Vue的,一个封装好,直接粘贴复制就可以

缺点:功能不全,只有百度地图JavaScript API地图的一部分内容,看项目需求,想我的项目用地图的比较多,这个网站满足不了,只能选择第一种

第三种:vue-amap

简介:基于Vue 2.x与高德的地图组件,数据状态与地图状态单向绑定,开发者无需关心地图的具体操作【使用方法很简单,跟着官网走就可以了】

官网地址组件 | vue-amap

优点:跟Vue Baidu Map的一样,是针对Vue框架的,已经封装好的,可以直接使用

缺点:跟Vue Baidu Map的缺点一样,功能少

JavaScript API在vue中的具体使用方法:https://blog.csdn.net/zhumizhumi/article/details/91960045

Logo

前往低代码交流专区

更多推荐