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、如果项目复杂不建议使用其他地图框架，因为其他地图框架优化较差，且有些地图新功能可能没法使用。