今年的七夕節馬上就要來了！給女友送花送巧克力是不是太普通了呢？程序員給人的刻板印象是不懂浪漫的鋼鐵直男，扭轉的時刻到了！用H5技術給自己的女友或心儀的人一個驚喜怎麼樣？手掌地圖表白視頻你值得擁有。先來看效果。
一、使用個性化地圖將小島變成愛心
登錄騰訊位置服務官網，註冊帳號，在key管理裏創建新密鑰，QQ和微信都可以直接登錄，而且個性化地圖在網站和微信小程序中都可以使用哦。 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>玉露改(綠色系戀愛風格)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/css">
html,body{
width:100%;
height:100%;
}
*{
margin:0px;
padding:0px;
}
body {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#container{
width: 100%;
height: 100%;
}
</style>
<!--注意這裏引用的是gl.js，才支持自定義樣式-->
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=這裏改成你的key"></script>
<script>
window.onload = function () {
function init() {
var map = new TMap.Map(document.getElementById("container"), {
//地圖中心點，這裏是心形島的經緯度
center: new TMap.LatLng(24.932341,118.582993),
//地圖縮放級別，支持3～20
zoom: 20,
//地圖樣式ID，有效值爲”style[編號]”，與key綁定
mapStyleId: 'style1'
});
}
init();
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
上效果圖，好大一個紅心有沒有，如果你有更好的顏色搭配，歡迎在評論裏展示哦。 
//心形小島座標
var hart = new TMap.LatLng(24.932215,118.582971);
//起始點座標
var home = new TMap.LatLng(39.876019,116.411133);
var map = new TMap.Map(document.getElementById("container"), {
//地圖中心點
center: new TMap.LatLng(32.879587,111.972656),
//地圖縮放級別，支持3～20
zoom: 4,
//是否顯示地圖上的控件，默認true
showControl:false,
//地圖樣式ID，有效值爲”style[編號]”，與key綁定
mapStyleId: 'style1'
});
//移動路徑的座標
var path = [
home,
hart
];
這裏大家可以用MultiPolyline繪製折線，在地圖上走出個520線路什麼的，在走完一段之後給線段加個顏色，交給大家來實現吧。
然後向地圖中添加情侶頭像，用點標記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'
}
}]
});
}
至此，大功告成。歡迎各位小夥伴們在評論中秀出你的作品哦。
原文作者：肖無疾