然后向地图中添加情侣头像,用点标记MultiMarker来实现(微信小程序中用markers):
var marker = new TMap.MultiMarker({ map, styles: { \'car-down\': new TMap.MarkerStyle({ \'width\': 80, \'height\': 80, \'anchor\': { x: 40, y: 40, }, //头像路径 \'src\': \'images/tj.jpg\', }) }, geometries: [{ id: \'car\', styleId: \'car-down\', //坐标 position: home, }] });现在我们可以添加动画了,试了一下动画都是异步的,文档里没有回调,也无法链式调用,除了用setTimeout不知道大家有什么好办法没?
marker.moveAlong一般用来做轨迹回放,这里用来从家移动到心形小岛;map.easeTo可以使地图做平滑过渡的动画,这里一直放大地图到心形完整显示。
最后不能忘了用MultiLabel在地图上添加“我爱你”的文本标注:
//点击按钮 $("#btn").click(function () { $("#btn").hide(); //沿着指定路径移动 marker.moveAlong({ \'car\': { path, //坐标数组 speed: 5201314 //移动速度,正整数,单位:千米/小时 } }) var duration = 2000; //平滑过渡到指定状态,mapStatus为key-value格式,可以设定center、zoom、rotation、pitch。 map.easeTo({center:hart},{duration});//移动地图 var duration2 = 1000; setTimeout(function () { map.easeTo({ zoom: 12 }, { duration:duration2 });//缩放地图 setTimeout(function () { map.easeTo({ zoom: 18 }, { duration:duration2 }); addLabel(); }, 3000); }, duration); }); //添加文本标注 function addLabel() { //初始化label var label = new TMap.MultiLabel({ id: \'label-layer\', map: map, styles: { \'label\': new TMap.LabelStyle({ \'color\': \'#D2000D\', //颜色属性 \'size\': 20, //文字大小属性 \'offset\': { x: 0, y: 0 }, //文字偏移属性单位为像素 \'angle\': 0, //文字旋转属性 \'alignment\': \'center\', //文字水平对齐属性 \'verticalAlignment\': \'middle\' //文字垂直对齐属性 }) }, geometries: [{ \'id\': \'label\', //点图形数据的标志信息 \'styleId\': \'label\', //样式id \'position\': new TMap.LatLng(24.932711,118.583046), //标注点位置 \'content\': \'我爱你\', //标注文本 \'properties\': { //标注点的属性数据 \'title\': \'label\' } }] }); }至此,大功告成。欢迎各位小伙伴们在评论中秀出你的作品哦。