Vue 高德地图组件 vue

  • Vue 高德地图组件
    vue-amap-基础使用
  • Vue 高德地图组件 vue-amap-拖动 Marker
  • Vue 高德地图组件 vue-amap-自定义 Marker
    图标
  • Vue 高德地图组件
    vue-amap-信息窗体使用注意
  • Vue 高德地图组件 vue-amap-基础使用
  • Vue 高德地图组件 vue-amap-拖动
    Marker
  • Vue 高德地图组件 vue-amap-自定义 Marker
    图标
  • Vue 高德地图组件
    vue-amap-信息窗体使用注意
  • Vue 高德地图组件
    vue-amap-基础使用
  • Vue 高德地图组件 vue-amap-拖动
    Marker
  • Vue 高德地图组件 vue-amap-自定义 Marker
    图标
  • Vue 高德地图组件 vue-amap-信息窗体使用注意



<el-amap-marker :position=”marker.position” :draggable=”true”
:events=”marker.markerEvents”

布局文件

信息窗体的标签名称为 el-amap-info-window,可以在其中嵌套模板。通常用
:visible=”visible” 控制是否显示信息窗体。

指定 draggable,注意两个
g。由于这里是布尔类型,所以建议前面加上冒号。

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

一、不要在显示信息窗体后,又异步加载内容。

这样 Marker 就可以拖动了,我们可以看到,位置绑定了 Marker 这个对象的
position 属性(是一个数组,第一个元素表示 longitude,第二个元素表示 
latitude)。但是在 marker 拖动时,并不会把新的位置回写给 position。

澳门新葡亰娱乐官网,<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>

因为信息窗体打开后,再异步加载内容,有可能内容太长,会撑大信息窗体,此时信息窗体可不是以中间为原点向两边撑,而是以左边为基准向右边撑。

获取拖动后 Marker 的经纬度,得按下面的方法(以下是自定义 marker
类里面的属性):

初始化

这导致一个问题:下面那个指向坐标的尖尖也会向右移动,导致给人一种指向不准的感觉。

private get markerEvents() { return { dragend: (e:IObject) => { //
e.lnglat.lng, e.lnglat.lat 是拖拽时鼠标的经纬度,并不是这个 marker
所指的经纬度 // e.target.getPosition() 才是当前 Marker 的 let lnglat =
e.target.getPosition(); this.dragendHandler(this._id, lnglat.lng,
lnglat.lat); } }; }

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” });

二、内部组件的事件

如果我们在拖动结束后,经过业务逻辑判断后,需要取消拖拽,变回原来的位置,则这样干:

地图脚本

前面说了信息窗体标签内部可以嵌套模板,而模板中可能有按钮,按钮的事件如何处理呢?

// marker.position = marker.oldPosition; //
千万不要这么干,这让两个数组指向同一个地址,造成这边变,那边跟着变,不是编程的好习惯。
// marker.position = marker.position; // 不会刷新绑定。 marker.position
= [marker.position[0], marker.position[1]]; //
成功,由于拖拽不会回写至
marker.position,所以我们这么做,实际上就是在用老位置重新写一下,这时就会刷新绑定了。

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

<el-amap-info-window :position=”infoWindow.position”
:visible=”infoWindow.visible” :autoMove=”true” > <div>
<van-cell title=”组织名称” :value=”infoWindow.organizationName” />
<div style=”text-align:right;”> <van-button type=”info”
size=”small” @click=”onEdit”>修改</van-button> 
<van-button type=”warning” size=”small” @click=”infoWindow.visible =
false”>关闭</van-button> </div> </div>
</el-amap-info-window>

扩展

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; }

其中有一个 onEdit 方法,我初始的设想是跟 Marker 一样,将该方法放在
infoWindow 这个对象对应的类中,作为一个成员方法,目的是想获取 infoWindow
这个对象的其他属性,但是在实际使用中,发现在 onEdit 中并无法使用 this
以获取当前 infoWindow,说是 undefined。

e.target.getPosition().lng 是什么数据类型呢?

Marker 脚本

我回过头一看,这个跟 Marker 真不一样,Marker 的 events
是个属性,不是方法,于是我改为直接接方法 onEdit。

number。

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

那怎样获取 infoWindow 这个对象的其他属性呢?

  • Vue 高德地图组件
    vue-amap-基础使用
  • Vue 高德地图组件 vue-amap-拖动 Marker
  • Vue 高德地图组件 vue-amap-自定义 Marker
    图标
  • Vue 高德地图组件
    vue-amap-信息窗体使用注意

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; } }

直接用就是了。我们要知道:Marker
通常有很多个,所以如果不用对象的方法,获取当前 Marker
对应的数据比较麻烦,而 infoWindow
只有一个,它对应的对象也只有一个,我们在 onEdit 方法中,直接用
infoWindow 就可以了。


 

  • Vue 高德地图组件
    vue-amap-基础使用
  • Vue 高德地图组件 vue-amap-拖动
    Marker
  • Vue 高德地图组件 vue-amap-自定义 Marker
    图标
  • Vue 高德地图组件 vue-amap-信息窗体使用注意

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


 

  • Vue 高德地图组件 vue-amap-基础使用
  • Vue 高德地图组件 vue-amap-拖动
    Marker
  • Vue 高德地图组件 vue-amap-自定义 Marker
    图标
  • Vue 高德地图组件
    vue-amap-信息窗体使用注意

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图