七夕就要來到了，在這個浪漫的日子里，如何才能展現(xiàn)程序員獨有的魅力呢？當然是寫代碼?。。?！不管你和“ta”有多遠，是隔著幾公里，還是一座城，還是一個省，在手掌地圖里的你們，心是緊緊的挨在一起?？靵砜纯催@個手掌地圖的效果是咋樣的吧~
七夕告白.gif
一、使用個性化地圖將小島變成愛心
登錄騰訊位置服務(wù)官網(wǎng)，注冊帳號，在key管理里創(chuàng)建新密鑰，QQ和微信都可以直接登錄，而且個性化地圖在網(wǎng)站和微信小程序中都可以使用哦。
登錄官網(wǎng)
前往“控制臺->個性化地圖->個性化樣式->樣式選擇”，從列表中選擇一個模板“編輯樣式”，這里我們選擇的是二次元地圖雨露：
個性化地圖
現(xiàn)在該尋找一個心形島了，我選擇的是福建省泉州市西湖公園湖中心的小島，在地圖右下角：
心形島
一直放大地圖，找到西湖公園，可以看到現(xiàn)在心形島是綠色的（綠地）。
image
image
image
image
提交成功之后我們就可以進行開發(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>
上效果圖，好大一個紅心有沒有，如果你有更好的顏色搭配，歡迎在評論里展示哦。
image
先初始化地圖（頁面背景圖為手的照片，中間層放的地圖，頂層圖是把手扣掉的png）。
//心形小島坐標
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線路什么的，在走完一段之后給線段加個顏色，交給大家來實現(xiàn)吧。
然后向地圖中添加情侶頭像，用點標記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',
//坐標
position: home,
}]
});
現(xiàn)在我們可以添加動畫了，試了一下動畫都是異步的，文檔里沒有回調(diào)，也無法鏈式調(diào)用，除了用setTimeout不知道大家有什么好辦法沒？
marker.moveAlong一般用來做軌跡回放，這里用來從家移動到心形小島；map.easeTo可以使地圖做平滑過渡的動畫，這里一直放大地圖到心形完整顯示。
最后不能忘了用MultiLabel在地圖上添加“我愛你”的文本標注：
//點擊按鈕
$("#btn").click(function () {
$("#btn").hide();
//沿著指定路徑移動
marker.moveAlong({
'car': {
path, //坐標數(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);
});
//添加文本標注
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ù)的標志信息
'styleId': 'label', //樣式id
'position': new TMap.LatLng(24.932711,118.583046), //標注點位置
'content': '我愛你', //標注文本
'properties': { //標注點的屬性數(shù)據(jù)
'title': 'label'
}
}]
});
}
至此，大功告成。歡迎各位小伙伴們在評論中秀出你的作品哦。
image
