乐趣区

关于javascript:七夕特刊程序员如何通过H5绘制手掌地图表白

jiezi

往年的七夕节马上就要来了！给女友送花送巧克力是不是太普通了呢？程序员给人的刻板印象是不懂浪漫的钢铁直男，扭转的时刻到了！用 H5 技术给本人的女友或心仪的人一个惊喜怎么样？手掌地图表白视频你值得领有。先来看成果。

https://www.bilibili.com/vide…

一、应用个性化地图将小岛变成爱心

登录腾讯位置服务官网，注册帐号，在 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～20
        zoom: 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～20
        zoom: 4,     
        // 是否显示地图上的控件，默认 true
        showControl: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() {
        // 初始化 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, // 文字旋转属性
                    'alignment': 'center', // 文字水平对齐属性
                    'verticalAlignment': 'middle' // 文字垂直对齐属性
                })
            },
            geometries: [{
                'id': 'label', // 点图形数据的标记信息
                'styleId': 'label', // 款式 id
                'position': new TMap.LatLng(24.932711,118.583046), // 标注点地位
                'content': '我爱你', // 标注文本
                'properties': { // 标注点的属性数据
                    'title': 'label'
                }
            }]
        });
    }

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

原文作者：肖无疾

退出移动版