vue/react网页端地图(百度、高德等)

此教程通用 与百度、高德地图等,在vue或react项目中用法大致一直。

主要介绍高德地图在vue的使用方法

一、高德地图账号登陆后,进入应用管理申请key


1、进入应用管理

   

2、创建新应用


3、随意选择或输入


4、选择添加


5、填写信息,注意你选择的服务平台

                

6、这个是后期会用到的key值!



二、在项目中使用地图

1、引用

        在项目中使用线上引入,参数说明:

                                        v:1.4.15   (地图版本号)

                                        key:之前申请好的key

                                        plugin:插件的使用,用于地图功能的扩展(https://lbs.amap.com/api/javascript-api/guide/abc/plugins/


2、在vue项目中使用


        地图使用:https://lbs.amap.com/demo-center/js-api

完成以上操作可显示地图,如果项目要求定制化样式可继续往下!


三、地图定制化样式


                            

        点击创建后进入自定义地图页面,左侧栏对地图进行样式的修改

        

        修改完成后,先保存,在发布!发布后返回自定义动图页面

        

                点击使用与分享

                

        复制后在vue项目中使用

        

   总结:   1、多个地图(腾讯、高德、百度等)使用方法大致相同             

                 2、如果项目复杂不建议使用其他地图框架,因为其他地图框架优化较差,且有些地图新功能可能没法使用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容