七夕將至杏头,程序員這份表白代碼請收好

七夕就要來到了盈包,在這個浪漫的日子里沸呐,如何才能展現(xiàn)程序員獨有的魅力呢醇王?當(dāng)然是寫代碼啊U柑怼T⒚洹!不管你和“ta”有多遠(yuǎn)呼渣,是隔著幾公里棘伴,還是一座城,還是一個省屁置,在手掌地圖里的你們焊夸,心是緊緊的挨在一起±督牵快來看看這個手掌地圖的效果是咋樣的吧~

七夕告白.gif

一阱穗、使用個性化地圖將小島變成愛心

登錄騰訊位置服務(wù)官網(wǎng),注冊帳號使鹅,在key管理里創(chuàng)建新密鑰揪阶,QQ和微信都可以直接登錄,而且個性化地圖在網(wǎng)站和微信小程序中都可以使用哦患朱。


登錄官網(wǎng)

前往“控制臺->個性化地圖->個性化樣式->樣式選擇”鲁僚,從列表中選擇一個模板“編輯樣式”,這里我們選擇的是二次元地圖雨露:


個性化地圖

現(xiàn)在該尋找一個心形島了裁厅,我選擇的是福建省泉州市西湖公園湖中心的小島冰沙,在地圖右下角:
心形島

一直放大地圖,找到西湖公園执虹,可以看到現(xiàn)在心形島是綠色的(綠地)拓挥。


image
我們將它的“填充顏色”換成紅色,是不是立馬就有紅心的感覺了声畏。同理撞叽,我們還可以更改陸地的顏色或?qū)ⅰ疤畛渫该鞫取痹O(shè)為0%以增加與背景圖手的融合姻成。
image
點擊左上角的保存圖標(biāo),并返回到上一頁愿棋,發(fā)布我們剛才編輯的樣式科展。
image
下面我們需要選擇應(yīng)用樣式的key,還沒有的話需要去key管理里創(chuàng)建一個糠雨,后面我們將用到才睹。雖然本示例使用JSAPI GL進(jìn)行演示,但還是必須在地圖sdk和小程序中至少勾選一個甘邀,這里我們就選地圖sdk吧琅攘。
image

提交成功之后我們就可以進(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>

上效果圖邮府,好大一個紅心有沒有荧关,如果你有更好的顏色搭配,歡迎在評論里展示哦褂傀。


image

先初始化地圖(頁面背景圖為手的照片忍啤,中間層放的地圖,頂層圖是把手扣掉的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'
                }
            }]
        });
    }

至此,大功告成茸时。歡迎各位小伙伴們在評論中秀出你的作品哦贡定。

image
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市屹蚊,隨后出現(xiàn)的幾起案子厕氨,更是在濱河造成了極大的恐慌进每,老刑警劉巖汹粤,帶你破解...
    沈念sama閱讀 216,919評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異田晚,居然都是意外死亡嘱兼,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評論 3 392
  • 文/潘曉璐 我一進(jìn)店門贤徒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來芹壕,“玉大人,你說我怎么就攤上這事接奈√哂浚” “怎么了?”我有些...
    開封第一講書人閱讀 163,316評論 0 353
  • 文/不壞的土叔 我叫張陵序宦,是天一觀的道長睁壁。 經(jīng)常有香客問我,道長互捌,這世上最難降的妖魔是什么潘明? 我笑而不...
    開封第一講書人閱讀 58,294評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮秕噪,結(jié)果婚禮上钳降,老公的妹妹穿的比我還像新娘。我一直安慰自己腌巾,他們只是感情好遂填,可當(dāng)我...
    茶點故事閱讀 67,318評論 6 390
  • 文/花漫 我一把揭開白布铲觉。 她就那樣靜靜地躺著,像睡著了一般吓坚。 火紅的嫁衣襯著肌膚如雪备燃。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,245評論 1 299
  • 那天凌唬,我揣著相機(jī)與錄音并齐,去河邊找鬼。 笑死客税,一個胖子當(dāng)著我的面吹牛况褪,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播更耻,決...
    沈念sama閱讀 40,120評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼测垛,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了秧均?” 一聲冷哼從身側(cè)響起食侮,我...
    開封第一講書人閱讀 38,964評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎目胡,沒想到半個月后锯七,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,376評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡誉己,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,592評論 2 333
  • 正文 我和宋清朗相戀三年眉尸,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片巨双。...
    茶點故事閱讀 39,764評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡噪猾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出筑累,到底是詐尸還是另有隱情袱蜡,我是刑警寧澤,帶...
    沈念sama閱讀 35,460評論 5 344
  • 正文 年R本政府宣布慢宗,位于F島的核電站坪蚁,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏婆廊。R本人自食惡果不足惜迅细,卻給世界環(huán)境...
    茶點故事閱讀 41,070評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望淘邻。 院中可真熱鬧茵典,春花似錦、人聲如沸宾舅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至扶平,卻和暖如春帆离,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背结澄。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評論 1 269
  • 我被黑心中介騙來泰國打工哥谷, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人麻献。 一個月前我還...
    沈念sama閱讀 47,819評論 2 370
  • 正文 我出身青樓们妥,卻偏偏與公主長得像,于是被迫代替她去往敵國和親勉吻。 傳聞我的和親對象是個殘疾皇子监婶,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,665評論 2 354

推薦閱讀更多精彩內(nèi)容