§ ITPOW >> 文档 >> 专题档案

作者：vkvi 来源：ITPOW（原创） 日期：2019-12-3

布局文件

注意用样式为地图设置高度。

<el-amap vid="__amap-pop-item" :plugin="plugin" :zoom="zoom" :center="center" :events="mapEvents" > <el-amap-marker v-for="marker in markers" :key="marker._id" :position="marker.position" :title="marker.title" :label="{content:marker.title, offset:[5,30]}" :vid="marker._id" animation="AMAP_ANIMATION_DROP" :visible="marker.visible" :events="marker.markerEvents" ></el-amap-marker> </el-amap>

初始化

const VueAMap = require("vue-amap") as IObject; Vue.use(VueAMap.default); VueAMap.initAMapApiLoader({ key: "your key", plugin: [ "AMap.Autocomplete", "AMap.PlaceSearch", "AMap.Scale", "AMap.OverView", "AMap.ToolBar", "AMap.MapType", "AMap.PolyEditor", "AMap.CircleEditor" ], v: "1.4.5" });

地图脚本

脚本里面要说明的是，不能直接响应 click 事件，应该通过 events 实现。

private map: IObject = {}; private plugin = []; private zoom: number = 14; private center: number[] = [经度, 纬度]; private get mapEvents() { return { init: (o: IObject) => { this.map = o; }, click: (e: IObject) => { this.onMapClick(e); } }; } private onMapClick(event: any) { let longitude = event.lnglat.lng; let latitude = event.lnglat.lat; }

Marker 脚本

同样的，Marker 不能直接使用 click，要放在 events 中。为了获得到底是点的哪个 marker 对应的数据，我们通常将 events 对应 marker 数据对象。

export type IMarkerClickHandler = (_id: string) => any; export class Marker { public _id: string = ""; public position: string[] = []; public title: string = ""; public visible: boolean = false; private get markerEvents() { return { click: (e: IObject) => { this.clickHandler(this._id); } }; } private clickHandler: IMarkerClickHandler; constructor(o: YourClass, clickHandler: IMarkerClickHandler) { this._id = o._id; this.position = [o.longitude, o.latitude]; this.title = o.title; this.clickHandler = clickHandler; } }

 

private markers: Marker[] = []; private onMarkerClick(_id: string) { // marker clicked } markers.push(new Marker(o, onMarkerClick));