Tanabata Special Issue: How to use H5 to draw palm-to-ground charts by programmers

This year's Qixi Festival is coming soon! Is it too common to send flowers and chocolates to your girlfriend? The stereotype given by programmers is that of straight men who don’t understand romance, the time has come for a turnaround! How about using H5 technology to surprise your girlfriend or your favorite person? You deserve it. Let's look at the effect first.

https://www.bilibili.com/video/BV17v411T7TH/?aid=249790876&cid=386974974&page=1

1. Use a personalized map to turn the island into a heart

Log in to Tencent's location service official website, register an account, and create a new key in key management. Both QQ and WeChat can log in directly, and the personalized map can be used on the website and WeChat applet.
登录官网 Go to "Control Panel -> Personalized Map -> Personalized Style -> Style Selection", select a template "Edit Style" from the list, here we choose the two-dimensional map rain and dew:
个性化地图
Now it’s time to look for a heart-shaped island. I chose the small island in the center of Xihu Park Lake in Quanzhou City, Fujian Province. In the lower right corner of the map:
心形岛 keep zooming in on the map and find West Lake Park, you can see that the heart-shaped island is now green (green space).
We changed its "fill color" to red, is it right? It immediately feels like a red heart. In the same way, we can also change the color of the land or set the "fill transparency" to 0% to increase the fusion with the background image.
Click the save icon in the upper left corner and return to the previous page to publish the style we just edited.
we need to select the key of the application style. If not, we need to create one in the key management. We will use it later. Although this example uses JSAPI GL for demonstration, at least one of the map sdk and applet must be checked. Here we choose the map sdk.

After the submission is successful, we can proceed with development. Note that there is a number "style 1" on the top and it will also be used underneath. Here is a simple code to verify whether our personalized map works:

<!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>

On the renderings, there is a big red heart. If you have a better color combination, please show it in the comments.

Initialize the map first (the background image of the page is a photo of the hand, the map on the middle layer, and the top image is a png with the handle off).

    //心形小岛坐标
    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
];

Here you can use MultiPolyline to draw a polyline, walk out a 520 line or something on the map, add a color to the line segment after walking a section, and let everyone implement it.

Then add the couple's avatar to the map, and use the dot to mark MultiMarker to achieve (markers in the WeChat applet):

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,
      }]
    });

Now we can add animation. I tried it. Animations are all asynchronous. There are no callbacks in the document and cannot be chained. Except for setTimeout, I don’t know if there is any good way to do it.

marker.moveAlong is generally used for trajectory playback, here it is used to move from home to the heart-shaped island; map.easeTo can make the map do a smooth transition animation, here the map is zoomed in until the heart-shaped display is complete.

Finally, don’t forget to add the text "I love you" to the map with 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'
                }
            }]
        });
    }

At this point, you're done. Welcome friends to show your work in the comments.

Original Author: Xiao Wuji

Tanabata Special Issue: How to use H5 to draw palm-to-ground charts by programmers

1. Use a personalized map to turn the island into a heart

腾讯位置服务

引用和评论

轨迹云全新发布：外业车辆、人员、设备轨迹高效管理

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

Tanabata Special Issue: How to use H5 to draw palm-to-ground charts by programmers

1. Use a personalized map to turn the island into a heart

腾讯位置服务

引用和评论

轨迹云全新发布 ：外业车辆、人员、设备轨迹高效管理

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

轨迹云全新发布：外业车辆、人员、设备轨迹高效管理