4种vue当中的指令和它的作用vuemapvue-amap1.1.2

导读@vuemap/vue-amap的vue3版本迎来了重大更新，新版本版本号1.1.2，该版本有三大重要变化，今天小编就来聊一聊关于4种vue当中的指令和它的....

@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>

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.vueimport {defineComponent} from "vue";export default defineComponent({ name: App, components: { test },})</script><style>#app { height: 600px;}</style>