@vuemap/vue-amap的vue3版本迎来了重大更新，新版本版本号1.1.2，该版本有三大重要变化，今天小编就来聊一聊关于4种vue当中的指令和它的作用?接下来我们就一起去研究一下吧!
4种vue当中的指令和它的作用
@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>
创建 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>
