@vuemap/vue-amap的vue3版本迎来了重大更新，新版本版本号1.1.2，该版本有三大重要变化

1、地图组件现在支持包装使用了，可以将多个子组件按业务情况进行包装使用，比如叠加高精地图，可以将线和面封装到一个vue文件中，在多处使用

2、新特性，现在支持自定义自己的地图组件，提供了registerMixin

3、initAMapLoader增加securityJsCode和serviceHost，用于适应新版本的key

4、增加定位组件 el-amap-control-geolocation

下面是新版本的示例

1、地图组件包装

创建 CustomLoca.vue 文件

<template>
  <div>
    <el-amap-loca-line :source-url="sourceUrl" :layer-style="layerStyle"></el-amap-loca-line>
  </div>
</template>

<script>
import {defineComponent} from "vue";

let colors = ['#f7fcf5', '#e5f5e0', '#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#006d2c', '#00441b'].reverse();
export default defineComponent({
  name: "CustomLoca",
  data(){
    return {
      sourceUrl: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/bj_bus.json',
      layerStyle: {
        color: function (index) {
          var i = index % colors.length;
          return colors[i];
        },
        lineWidth: (index) => {
          var i = index % colors.length;
          return i * 0.1 + 2;
        },
        altitude: function (index) {
          var i = index % colors.length;
          return 100 * i;
        },
        // dashArray: [10, 5, 10, 0],
        dashArray: [10, 0, 10, 0],
      }
    }
  }
})
</script>

<style scoped>

</style>

地图加载组件

<template>
  <div id="app">
    <el-amap :center="[116.335036, 39.900082]" :zoom="8">
      <el-amap-loca>
        <custom-loca />
      </el-amap-loca>
    </el-amap>
  </div>
</template>

<script>
import CustomLoca from "./components/CustomLoca.vue";
import {defineComponent} from "vue";
export default defineComponent({
  name: 'App',
  components: {
    CustomLoca
  },
})
</script>

<style>
#app {
  height: 600px;
}
</style>

2、自定义地图组件

创建 test.vue 组件

<template>
  <div>
  </div>
</template>

<script>
import {registerMixin} from "@vuemap/vue-amap";
import {defineComponent} from "vue";

export default defineComponent({
  name: "test",
  mixins: [registerMixin],
  methods: {
    __initComponent(){
      console.log('this.parentInstance: ', this.parentInstance);
      let map = this.parentInstance.$amapComponent;
      let position = this.parentInstance.$amapComponent.getCenter();
      let marker = new AMap.Marker({
        position: position
      })
      map.add(marker);
    }
  }
})
</script>

地图加载test.vue组件

<template>
  <div id="app">
    <el-amap :center="[116.335036, 39.900082]" :zoom="8">
      <test />
    </el-amap>
  </div>
</template>

<script>
import test from './components/test.vue'
import {defineComponent} from "vue";
export default defineComponent({
  name: 'App',
  components: {
    test
  },
})
</script>

<style>
#app {
  height: 600px;
}
</style>