0、保存Map实例
NOTE:
如何引入天地图SDK请参考以前的文章
首先要做的肯定是保存Map实例，可以保存在Vue实例上：
this.Map = new T.Map(......);
或者保存在window上：
window.Map = new T.Map(......);
1、创建标注
创建标注使用的是工具类。下面都用点(Marker)来作为例子。
在页面中创建一个按钮，使用它的click事件来打开标注工具：
<button @click="btnClick">添加点</button>
为了看起来不违和，你可以把这个按钮的样式做成和地图原生控件一样。
在click事件中打开标注工具：
btnClick(){
//如果标注工具已经存在，先关闭它
window.marktool && window.marktool.close();
//创建一个Icon实例
let icon = new T.Icon({
iconUrl: 'https://x.y.z/1.png'
});
//实例化工具
let marktool = new T.MarkTool(window.Map, {
icon,
follow: true
});
marktool.open();
window.marktool = marktool;
}
现在，点击添加点按钮的时候，鼠标指针将变成你定义的icon的样式，点击地图，就会在点击的位置留下一个标记。
2、给标记添加自定义的数据
标记肯定代表了某个实际的东西，需要补充额外的内容。可以在上一步给marktool注册一个mouseup事件，给刚刚创建的标记添加一个click事件，以便我们进行更多的操作：
//别忘了先保存一下Vue实例this：
let _this = this;
//onMarkMarked是Vue的Method
//e.currentMarker代表当前标记
marktool.addEventListener('mouseup', function (e) {
_this.onMarkMarked(e.currentMarker);
});
在Vue的onMarkMarked方法中：
onMarkMarked(marker){
let _this = this;
//直接添加数据
marker.MyData = {foo: 'bar', baz: 'balabala...'};
//保存marker，使页面中任何代码都能访问，就能任意赋值了
//但要注意，currentMark保存的是当前标记，创建新标记时，它代表的是新的标记
_this.currentMark = marker;
}
在Vue的其他方法中给它赋值：
onModelClosed(){
this.currentMark.myname = this.inputName;
//......
//可以在控制台看到marker实例中包含自定义的数据
console.log(this.currentMark);
}
3、保存标记数据
首先获取到标记：
let markers = window.Map.getOverlays();
返回的是一个标记数组，如果有多个标记，根据需要，可能需要循环处理。这里假设只有一个marker标记。
标记信息含有很多无用的信息，我们需要的一般都是标记的坐标、自定义的数据。标记的样式由于是提前定义好的，所以并不会通过标记获取。
let lnglat = markers[0].getLnglat();
let { myname, MyData } = markers[0];
此时就可以保存到数据库了。
END
