第一步，使用个性化地图将小岛变成爱心♥

点击下方链接注册帐号，在key管理里创建新密钥，QQ和微信都可以直接登录，而且个性化地图在网站和微信小程序中都可以使用哦。

https://lbs.qq.com?lbs_invite=RLV8FLR

前往“控制台->个性化地图->个性化样式->样式选择”，从列表中选择一个模板“编辑样式”，这里我们选择的是二次元地图雨露：

现在该寻找一个心形岛了，我选择的是福建省泉州市西湖公园湖中心的小岛，在地图右下角：

一直放大地图，找到西湖公园（找地点有点不够人性化呀），可以看到现在心形岛是绿色的（绿地）。

我们将它的“填充颜色”换成红色，是不是立马就有红心♥的感觉了。同理，我们还可以更改陆地的颜色或将“填充透明度”设为0%以增加与背景图手的融合。

点击左上角的保存图标，并返回到上一页，发布我们刚才编辑的样式。

下面我们需要选择应用样式的key，还没有的话需要去key管理里创建一个，后面我们将用到。虽然本示例使用JSAPI GL进行演示，但还是必须在地图sdk和小程序中至少勾选一个，这里我们就选地图sdk吧。

提交成功之后我们就可以进行开发了，留意上面有个编号“style 1”下面也会用到，来段简单的代码验证一下我们的个性化地图是否生效吧：

<!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～20zoom: 20,     //地图样式ID，有效值为”style[编号]”，与key绑定mapStyleId: 'style1' });}init();}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>

上效果图，好大一个红心有没有，如果你有更好的颜色搭配，可以来这里进行自定义https://lbs.qq.com?lbs_invite=RLV8FLR，欢迎在评论里展示哦。

第二步，正式开始编写代码

先初始化地图（页面背景图为手的照片，中间层放的地图，顶层图是把手扣掉的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～20zoom: 4,     //是否显示地图上的控件，默认trueshowControl: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() {//初始化labelvar 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'}}]});}

至此，大功告成。欢迎各位小伙伴们在评论中秀出你的作品哦。

程序员如何通过腾讯地图表白（使用到了个性化地图，点标记和动画等）相关推荐

程序员求助：腾讯面试题，64匹马8个跑道，多少轮选出最快的四匹
昨天,有网友私信我,说去阿里面试,彻底的被打击到了.问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题.无独有偶,今天笔 ...
怎么使用万能地图下载器制作百度个性化地图绿地水系陆地篇
1. 概述水经注软件除了可以轻松下载无水印Google Earth卫星影像.有明确拍摄日期的历史影像.地方高清天地图.百度高德大字体打印地图,按1万/5千等国家标准图幅下载,对百度坐标与火星坐标进行 ...
三·八节，菊厂程序员用“运动轨迹绘制”向女神表白
程序员为女友而备的礼物清单里,除了玫瑰.包包.和口红,就没有其他有新意又有心意的惊喜了嘛? No!这个"×"是远在法国出差的阿强比的,作为菊厂一向低调行事的程序员,阿强决定在今年的 ...
7年专科生程序员同时去腾讯和微软面试，问HR结果以为听错了，结局反转！！
我们踏入职场要面临的第一件事情就是面试,面试就是求职者和公司一个双向考察的过程.大部分面试者在面试时都是毕恭毕敬,内心还会有些紧张.但面试官的态度千差万别,尊敬,高冷,傲慢,这跟他们公司的实力也是由一 ...
程序员大专进腾讯被人看不起，低学历难道就该低人一等吗？
提到学历有一句话,"学历是一块好的敲门砖".由于近几年互联网的发展飞快,所以需要的计算机人才比较多,对此有人表示,互联网行业对学历难道很看重吗?但我觉得他们是站着说话不腰疼,虽然实 ...
【程序人生】程序员的浪漫，三步表白女神，成功率99%（程序员如何表白、求婚）
目录一写在前面二表白求婚 Step1.场景布置 Step2.求婚铺垫 Step3.表白宣言三写在最后一写在前面在大多数人的眼里,程序员/IT男都是不懂浪漫.理性大于感性的直男群体 ...
html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
35岁的程序员：第30章，表白
临近期末考试还剩下一个半月,一天下午下课,在回宿舍的路上,郭云发现潘梦晴正一个人走在前面.他觉得这是一个机会,心跳开始加速,深吸了好几口气,依然无法平静,他握紧了拳头跟了过去,走近轻声叫道: ...
腾讯校招课堂｜程序员如何在腾讯完成自己的“游戏梦”
导语:儿时的游戏梦一直深埋心中,做出一款被人记住的游戏的幸福感不言而喻.但如何进入行业呢? 腾讯游戏人的一天是什么样的?想进腾讯做游戏,要做什么准备呢?做游戏的鹅们都是什么专业的呢? 教你如何正确打开 ...

程序员如何通过腾讯地图表白（使用到了个性化地图，点标记和动画等）

第一步，使用个性化地图将小岛变成爱心♥

第二步，正式开始编写代码

程序员如何通过腾讯地图表白（使用到了个性化地图，点标记和动画等）相关推荐

最新文章

热门文章