526互联

基于vue+elementUI使用vue-amap高德地图

发布时间 2023-06-27 13:43:14作者: 妞妞猪

首先，需要去高德地图进行注册一个 https://lbs.amap.com/?ref=https://console.amap.com/dev/index ，得到一个key

然后 安装依赖

npm install vue-amap —save

在main.js中加入

import VueAMap from 'vue-amap’;
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'YOUR_KEY’, //上面步骤提到的key复制过来
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
v: '1.4.4'
});

template中加入

<template>
    <div class="amap-wrapper">
      <el-amap
            ref="map"
            :vid="'amapDemo'"
            :center="center"
            :zoom="zoom"
            :plugin="plugin"
            :events="events"
            class="amap-demo"
            style="height: 800px;width: 100%">
            <el-amap-marker v-for="(u,i) in markers" :position="u.position" :key="i">
            </el-amap-marker>
            <el-amap-marker :position="[121.5273285, 31.21515044]" :icon="icon">
           </el-amap-marker>
        </el-amap>
 </div>
</template>
 
script中加入
<script>
 export default {
        name: 'index',
        data() {
            return {
                center: [121.5273285, 31.21515044],
                zoom: 12,
                position: [121.5273285, 31.21515044],
                icon: new AMap.Icon({            
                    image: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
                    size: new AMap.Size(128, 128),  //自定义地图标记点图片
                    imageSize: new AMap.Size(64,64)
                }),
                events: {
                    init(o){
                        console.log(o.getCenter());
                    },
                    zoomchange: (e) => {
                        console.log(e);
                    },
                    zoomend: (e) => {
                        //获取当前缩放zoom值
                        console.log(this.$refs.map.$$getInstance().getZoom());
                        console.log(e);
                    },
                    click: e => {
                        alert('map clicked')
                    }
                },
                markers: [//标记点位置
                    {
                        position: [121.5273285, 31.21515044]
                    },
                    {
                        position: [121.5174286, 31.21515044]
                    }
                ],
               //使用其他组件
                plugin: [
                    {
                        pName: 'Scale',
                        events: {
                            init(instance) {
                                console.log(instance)
                            }
                        }
                    },
                    {
                        pName: 'ToolBar',
                        events: {
                            init(instance) {
                                console.log(instance)
                            }
                        }
                    }
                ],
            };
        },
        methods: {
        }
    }
</script>
 
参考https://blog.csdn.net/qq_42112618/article/details/120323519