七夕就要來到了盈包，在這個浪漫的日子里沸呐，如何才能展現(xiàn)程序員獨有的魅力呢醇王？當(dāng)然是寫代碼啊Ｕ柑怼Ｔ⒚洹！不管你和“ta”有多遠(yuǎn)呼渣，是隔著幾公里棘伴，還是一座城，還是一個省屁置，在手掌地圖里的你們焊夸，心是緊緊的挨在一起±督牵快來看看這個手掌地圖的效果是咋樣的吧~
一阱穗、使用個性化地圖將小島變成愛心
登錄騰訊位置服務(wù)官網(wǎng)，注冊帳號使鹅，在key管理里創(chuàng)建新密鑰揪阶，QQ和微信都可以直接登錄，而且個性化地圖在網(wǎng)站和微信小程序中都可以使用哦患朱。
前往“控制臺->個性化地圖->個性化樣式->樣式選擇”鲁僚，從列表中選擇一個模板“編輯樣式”，這里我們選擇的是二次元地圖雨露：
現(xiàn)在該尋找一個心形島了裁厅，我選擇的是福建省泉州市西湖公園湖中心的小島冰沙，在地圖右下角：
一直放大地圖，找到西湖公園执虹，可以看到現(xiàn)在心形島是綠色的（綠地）拓挥。
提交成功之后我們就可以進(jìn)行開發(fā)了，留意上面有個編號“style 1”下面也會用到松邪，來段簡單的代碼驗證一下我們的個性化地圖是否生效吧：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>玉露改(綠色系戀愛風(fēng)格)</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"), {
//地圖中心點，這里是心形島的經(jīng)緯度
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>
上效果圖邮府，好大一個紅心有沒有荧关，如果你有更好的顏色搭配，歡迎在評論里展示哦褂傀。
先初始化地圖（頁面背景圖為手的照片忍啤，中間層放的地圖，頂層圖是把手扣掉的png）仙辟。
//心形小島坐標(biāo)
var hart = new TMap.LatLng(24.932215,118.582971);
//起始點坐標(biāo)
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,
//是否顯示地圖上的控件，默認(rèn)true
showControl:false,
//地圖樣式ID欺嗤，有效值為”style[編號]”参萄，與key綁定
mapStyleId: 'style1'
});
//移動路徑的坐標(biāo)
var path = [
home,
hart
];
這里大家可以用MultiPolyline繪制折線，在地圖上走出個520線路什么的煎饼，在走完一段之后給線段加個顏色讹挎，交給大家來實現(xiàn)吧。
然后向地圖中添加情侶頭像吆玖，用點標(biāo)記MultiMarker來實現(xiàn)（微信小程序中用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',
//坐標(biāo)
position: home,
}]
});
現(xiàn)在我們可以添加動畫了筒溃，試了一下動畫都是異步的，文檔里沒有回調(diào)沾乘，也無法鏈?zhǔn)秸{(diào)用怜奖，除了用setTimeout不知道大家有什么好辦法沒？
marker.moveAlong一般用來做軌跡回放翅阵，這里用來從家移動到心形小島歪玲；map.easeTo可以使地圖做平滑過渡的動畫迁央，這里一直放大地圖到心形完整顯示。
最后不能忘了用MultiLabel在地圖上添加“我愛你”的文本標(biāo)注：
//點擊按鈕
$("#btn").click(function () {
$("#btn").hide();
//沿著指定路徑移動
marker.moveAlong({
'car': {
path, //坐標(biāo)數(shù)組
speed: 5201314 //移動速度滥崩，正整數(shù)岖圈，單位：千米/小時
}
})
var duration = 2000;
//平滑過渡到指定狀態(tài)，mapStatus為key-value格式钙皮，可以設(shè)定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);
});
//添加文本標(biāo)注
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, //文字旋轉(zhuǎn)屬性
'alignment': 'center', //文字水平對齊屬性
'verticalAlignment': 'middle' //文字垂直對齊屬性
})
},
geometries: [{
'id': 'label', //點圖形數(shù)據(jù)的標(biāo)志信息
'styleId': 'label', //樣式id
'position': new TMap.LatLng(24.932711,118.583046), //標(biāo)注點位置
'content': '我愛你', //標(biāo)注文本
'properties': { //標(biāo)注點的屬性數(shù)據(jù)
'title': 'label'
}
}]
});
}
至此，大功告成茸时。歡迎各位小伙伴們在評論中秀出你的作品哦贡定。
