tdt-map-vue2 0.1.6 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -6
- package/index.js +0 -1
- package/lib/BaseMap.vue +5 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -56,14 +56,17 @@ Vue.use(TdtMap, {
|
|
|
56
56
|
| lat | string | 是 | - | 点纬度 |
|
|
57
57
|
| img | image | 否 | - | 展示图片 |
|
|
58
58
|
| infos | 二维数组/string | 否 | - | 展示的文字 |
|
|
59
|
-
|
|
|
59
|
+
| infoWindowFn | function | 否 | - | 自定义信息窗口，返回{content,infoWindowOptions} |
|
|
60
|
+
| icon | string | 否 | - | 图标路径，默认使用天地图默认图标 |
|
|
61
|
+
| iconSize | array | 否 | - | 图标大小，默认[30, 30] |
|
|
62
|
+
| iconAnchor | array | 否 | - | 图标偏移量，默认[0, 0] |
|
|
60
63
|
| noClick | boolean | 否 | - | 不触发点击 marker 事件 |
|
|
61
64
|
| titleKeys | string | 否 | - | 指定 infos 中哪个数据有悬浮 title |
|
|
62
|
-
|
|
|
63
|
-
| labelFn | function | 否 | - | 自定义 Label，返回{content,style,anchor}，高优先级 |
|
|
65
|
+
| labelFn | function | 否 | - | 自定义 Label，返回{content,anchor}，高优先级 |
|
|
64
66
|
| isCustomMarker | boolean | 否 | - | 是否自定义 marker，默认 false，为 true 时，会使用 initTianDiMapMarker 方法渲染 marker |
|
|
65
67
|
|
|
66
|
-
- labelFn 回调接受两个参数(data, point)。需要返回包含 content(渲染内容)、
|
|
68
|
+
- labelFn 回调接受两个参数(data, point)。需要返回包含 content(渲染内容)、anchor(label 偏移量)的对象
|
|
69
|
+
- infoWindowFn 回调接受两个参数(data, point)。需要返回包含 content(渲染内容)、infoWindowOptions(信息窗口属性,参见[天地图信息窗口](http://lbs.tianditu.gov.cn/api/js4.0/class.html))的对象
|
|
67
70
|
|
|
68
71
|
例如：
|
|
69
72
|
|
|
@@ -73,14 +76,21 @@ Vue.use(TdtMap, {
|
|
|
73
76
|
id: "4968-a081",
|
|
74
77
|
lat: "31.792512",
|
|
75
78
|
lng: "116.829919",
|
|
76
|
-
|
|
79
|
+
icon: "http://192.168.0.222:10010/static/media/default.jpg",
|
|
80
|
+
iconSize: [30, 30],
|
|
81
|
+
iconAnchor: [0, 0],
|
|
77
82
|
infos: [
|
|
78
83
|
["名称", "#次高压4#"],
|
|
79
84
|
["压力", "六安次高压"],
|
|
80
85
|
["标号", "站至合肥新奥啊啊啊啊啊啊啊门站"],
|
|
81
86
|
["标号222", "站至合肥新奥啊啊啊啊啊啊啊门站"],
|
|
82
87
|
],
|
|
83
|
-
|
|
88
|
+
infoWindowFn: (data,point) => {
|
|
89
|
+
return {
|
|
90
|
+
content:{/*string or dom*/},
|
|
91
|
+
infoWindowOptions:{/*天地图信息窗口options*/},
|
|
92
|
+
}
|
|
93
|
+
}
|
|
84
94
|
},
|
|
85
95
|
{
|
|
86
96
|
id: 2,
|
package/index.js
CHANGED
package/lib/BaseMap.vue
CHANGED
|
@@ -407,6 +407,11 @@ export default {
|
|
|
407
407
|
marker.addEventListener("click", (e) => {
|
|
408
408
|
setTimeout(() => {
|
|
409
409
|
this.$emit("markerClick", { marker, data, e });
|
|
410
|
+
if(data.infoWindowFn) { // 信息窗口
|
|
411
|
+
const {content, infoWindowOptions={}} = data.infoWindowFn(data, point);
|
|
412
|
+
const markerInfoWin = new this.TMapGL.InfoWindow(content, infoWindowOptions);
|
|
413
|
+
this.map.openInfoWindow(markerInfoWin,point)
|
|
414
|
+
}
|
|
410
415
|
}, 0);
|
|
411
416
|
});
|
|
412
417
|
marker.addEventListener("mouseover", (e) => {
|