七夕福利:程序员如何通过H5绘制手掌地图表白
今年的七夕节马上就要来了!给女友送花送巧克力是不是太普通了呢?程序员给人的刻板印象是不懂浪漫的钢铁直男,扭转的时刻到了!用H5技术给自己的女友或心仪的人一个惊喜怎么样?手掌地图表白视频你值得拥有。先来看效果。
程序员表白手掌地图
一、使用个性化地图将小岛变成爱心
登录腾讯位置服务官网,注册帐号,在key管理里创建新密钥,QQ和微信都可以直接登录,而且个性化地图在网站和微信小程序中都可以使用哦。
前往“控制台->个性化地图->个性化样式->样式选择”,从列表中选择一个模板“编辑样式”,这里我们选择的是二次元地图雨露:
现在该寻找一个心形岛了,我选择的是福建省泉州市西湖公园湖中心的小岛,在地图右下角:
一直放大地图,找到西湖公园,可以看到现在心形岛是绿色的(绿地)。
我们将它的“填充颜色”换成红色,是不是立马就有红心的感觉了。同理,我们还可以更改陆地的颜色或将“填充透明度”设为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>
上效果图,好大一个红心有没有,如果你有更好的颜色搭配,欢迎在评论里展示哦。
先初始化地图(页面背景图为手的照片,中间层放的地图,顶层图是把手扣掉的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'}}]});}
至此,大功告成。欢迎各位小伙伴们在评论中秀出你的作品哦。
原文作者:肖无疾 原文链接:https://blog.csdn.net/xcx573/article/details/112384851
七夕福利:程序员如何通过H5绘制手掌地图表白相关推荐
- 最近分享一款抖音上很火的七夕节程序员表白页面_html5七夕表白放烟花动画特效...
html5七夕表白放烟花动画特效 最近分享一款抖音上很火的七夕节程序员表白页面.小姐姐,我好喜欢你,你愿意做我女朋友吗? 表白成功触发烟花背景动画特效. 表白内容:有人说,人的一生会遇到2920万人, ...
- 最近分享一款抖音上很火的七夕节程序员表白页面_html5七夕表白放烟花动画特效
html5七夕表白放烟花动画特效 最近分享一款抖音上很火的七夕节程序员表白页面.小姐姐,我好喜欢你,你愿意做我女朋友吗? 表白成功触发烟花背景动画特效. 表白内容:有人说,人的一生会遇到2920万人, ...
- html+css+js制作结婚倒计时网页模板(520/七夕情人节/程序员告白)
❉ html+css+javascript制作结婚倒计时网页模板(520/七夕情人节/程序员告白) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, 引用了C ...
- 七夕专属程序员的浪漫
七夕节,又称七巧节.七姐节.女儿节.乞巧节.七娘会.七夕祭.牛公牛婆日.巧夕等,是中国民间的传统节日.七夕节由星宿崇拜衍化而来,为传统意义上的七姐诞,因拜祭"七姐"活动在七月七晩上 ...
- c++语言表白超炫图形_让C/C++程序员告诉你什么叫浪漫,表白黑科技,炫酷多彩求爱利器...
原标题:让C/C++程序员告诉你什么叫浪漫,表白黑科技,炫酷多彩求爱利器 前言 缘是美丽的邂逅,爱是心跳的感觉,情是心灵的交会,恋是甜蜜的思念,走在爱与被爱的边缘,你见或者不见,爱你的心始终不改变!C ...
- 用c语言编写动态爱心树表白,程序员用HTML5制作的爱心树表白动画
HTML代码如下: 程序员用HTML5制作的爱心树表白动画- 柯乐义 本页面采用HTML5技术,目前您的浏览器无法显示,请使用支持HTML5的浏览器查看本页. 亲爱的何文琪: 曾经, 有一份真挚的爱情 ...
- 七夕,程序员的表白代码
来源:菜鸟教程 七夕快到了,表白素材赶紧先准备好... 0.委婉的表白 Python 代码: import stringl = string.ascii_letterss = []s.append(l ...
- 七夕,程序员教你5个表白代码,2分钟学会,牢牢主抓她的心
七夕.一个有人欢喜有人愁的节日,虽然对一些单身人士不太友好,但还有不少人都在等这个节日进行表白.毕竟这个日子的成功率会高一些. 情人节少不了送花送礼物,作为一个程序员,当然不会在送什么礼物上给你指点一 ...
- 七夕和程序员有毛关系?
七夕也要编程! 一个优秀的程序员,是没有节日的,工作日上班,节假日学习! 记录一起走过的那些日子 打开电脑- 打开IDEA- 创意代码表白 心中无女人,编码自然神!
最新文章
- Scala中Case Class使用详细解析
- cmd html 查找汉子字,字符串查找 cmd find命令
- github上的版本和本地版本冲突的解决方法(Updates were rejected because the tip of your current branch is behind)
- Sa身份登陆SQL SERVER失败的解决方案
- C语言二叉树实验报告流程图,二叉树的建立与遍历实验报告(c语言编写,附源代码).doc...
- 一个项目部署多个节点会导致锁失效么_Redis分布式锁
- 2021年7月国产数据库排行榜:openGauss成绩依旧亮眼,Kingbase向Top 10发起冲刺
- 年轻人原地过年,也不忘搞钱
- SqlServer Alwayson 搭建报错:19405
- x5cloud云平台---------------网络彩讯
- win10磁盘分区合并(win10磁盘分区合并c盘时扩展卷点不开)
- qpython3怎么运行代码_关于使用qpython和qpython3写程序
- UEFI电脑安装Win7并激活
- UVM糖果爱好者教程 - 31.provides_responses?
- 用java制作扑克牌_Java程序设计之扑克牌
- Warning_The `android.dexOptions.incremental` property is deprecated and it has no effect on the buil
- 河南联通网通封杀路由器解决办法
- bitmap的六种压缩方式,Android图片压缩
- 解决win10卡顿现象
- 【渝粤教育】广东开放大学 搜索引擎营销(SEM) 形成性考核 (47)