Vue中使用高德地图（vue-amap）的采坑记录&小白入门

逃离我推掉我的手 2023-02-12 07:26 36阅读 0赞

### 这里写目录标题 ###

*   *   *  写在开始
         *   *   *  step.1 安装组件
                 *  step.2 引入组件
                 *  step.3注册高德高德开发者账号，申请KEY
                 *  step.4 正式使用

### 写在开始 ###

俗话说授人以鱼不如授人以渔，直接记录代码的话实在是有些简单粗暴了，因此在开篇直接不妨跟着我的这篇博客**从零开始**将`vue-amap`组件添加到我们的项目中吧~

##### step.1 安装组件 #####

安装`vue-amap`：

npm install vue-amap --save

##### step.2 引入组件 #####

**Vue**中推荐在`main.js`中进行引入：

import Vue from 'vue';
    import VueAMap from 'vue-amap';
    import App from './App.vue';
     
    Vue.use(VueAMap);
    VueAMap.initAMapApiLoader({
        
      key: 'your amap key',
      plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
      // 默认高德 sdk 版本为 1.4.4
      v: '1.4.4'
    });
    
    new Vue({
        
      el: '#app',
      render: h => h(App)
    })

##### step.3注册高德高德开发者账号，申请KEY #####

毕竟只是安装引入了组件并没有什么卵用，还是需要高德开发账号的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMTA4MjM3_size_16_color_FFFFFF_t_70]  
申请成为个人开发者后，在控制台创建一个应用，类型为：web服务，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMTA4MjM3_size_16_color_FFFFFF_t_70 1]  
能够看到我们可使用的服务非常的多，就是他了！  
创建完毕后，生成一个`secret_key`，我们后续的很多功能是离不开`secret_key`的。

##### step.4 正式使用 #####

接下来我们可以正式的在Vue中使用高德地图的组件了。方法如下：  
**demo.vue**

<template>
    	<div class="amp-demo">
    		<el-amap vid="amap" :zoom="zoom" :center="center" class="amap-demo" v-if="reFresh">
    			
    			<el-amap-marker :position="marker.position" :visible="marker.visible" :draggable="marker.draggable" vid="index" ></el-amap-marker>
    			<el-amap-marker :position="marker2.position" :visible="marker2.visible" :draggable="marker2.draggable" vid="index2"></el-amap-marker>
    			
    			<el-amap-text v-for="(text,index) in texts" :key="index" :text="text.text" :offset="text.offset" :position="text.position" :events="text.events"></el-amap-text>
    			
    			<el-amap-polyline :editable="polyline.editable"  :path="polyline.path" ></el-amap-polyline>
    		</el-amap>   
    	</div>
    </template>
    
    
    <script>
    export default {
        
        name: 'demo',
        data() {
        
            return {
        
                reFresh:true,
                slotStyle: {
        
                    padding: '2px 8px',
                    background: '#eee',
                    color: '#333',
                    border: '1px solid #aaa'
                },
                zoom: 12,
                center: [121.5273285, 31.25515044],
                polyline: {
        
                    path: [[121.5389385, 31.21515044], [121.5273285, 31.21515044]],
                    editable: false
                },
                marker: {
        
                    position: [121.5273285, 31.21515044],
                    visible: true,
                    draggable: false,
                    content:'2',
                    template: '<span>2</span>',
                },
                marker2: {
        
                    position: [121.5273285, 31.21515044],
                    visible: true,
                    draggable: false,
                    content:'1',
                    template: '<span>1</span>',
                },
                texts: [
                    {
        
                        position: [121.5273285, 31.21515044],
                        text: '收货地',
                        offset: [0, -70],
                    },
                    {
        
                        position: [121.5273285, 31.21515044],
                        text: '发货地',
                        offset: [0, -70],
                    },
                ],
            }
        },
        methods: {
        
            menuTree(){
        
                this.reFresh= false
                this.$nextTick(()=>{
        
                    this.reFresh = true
                })
            },
        }
    };
    
    </script>

这样就可以生成一个高德地图了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMTA4MjM3_size_16_color_FFFFFF_t_70 2]  
emm基本上的效果是和上图一致的，只不过是我修改了`zoom`这个属性。  
需要注意：`<el-amap>`一定要设置宽高，不然地图不会显示。或者给外面套一个`div`，给`div`设置宽高也行。  
还有许多可供调用的组件，我们都可以在这里找到使用说明书！[vue-amap的使用文档][vue-amap]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMTA4MjM3_size_16_color_FFFFFF_t_70 3]  
左侧的这些组件就是我们需要的啦，可以从中选取我们需要的组件，添加到`vue-amap`下面，再根据文档中提到的一些属性我们进行对应的设置，就可以正常的使用啦！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMTA4MjM3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200528150314973.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMTA4MjM3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMTA4MjM3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200528150419784.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMTA4MjM3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMTA4MjM3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200528151331547.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMTA4MjM3,size_16,color_FFFFFF,t_70
[vue-amap]: https://elemefe.github.io/vue-amap/#/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMTA4MjM3_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200528151849899.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMTA4MjM3,size_16,color_FFFFFF,t_70