This year’s Tanabata Festival is coming soon! Is sending flowers and chocolates to your girlfriend too common? Programmers are stereotyped as straight men of steel who don’t understand romance. It’s time to turn around! How about surprising your girlfriend or crush with H5 technology? You deserve it. Let’s look at the effect.

1. Use personalized maps to turn islands into hearts

Log in to the official website of Tencent location service, register an account, create a new key in the key management, QQ and wechat can be directly logged in, and personalized map in the website and wechat mini program can be used oh.Go to the Console -> Personalized Map -> Personalized Style -> Style Selection and select a template from the list “Edit Style”, here we select the two-dimensional map raindrop:Now it’s time to look for a heart-shaped island. I chose the island in the center of the Lake in West Lake Park, Quanzhou City, Fujian Province, in the lower right corner of the map:Zoom in until you find West Lake Park. You can see that the heart-shaped island is now green.We’ll change the “fill color” to red, and it’ll look like hearts right away. In the same way, we can also change the color of the land or set fill Opacity to 0% to increase blending with the background image.Click on the save icon in the upper left corner and go back to the previous page to publish the style we just edited.Now we need to select a key to apply the style to. If we don’t have one, we need to create one in the Key manager, which we will use later. Although this example uses JSAPI GL for demonstration purposes, you must check at least one of the map SDK and applets, so we’ll use the Map SDK here.Once the submission is successful, we can start development. Note that the number above is “style 1”, which will also be used below. Let’s use a simple code to verify that our personalized map works:

<! DOCTYPEhtml>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Yulu Transformation (green love style)</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>
<! -- Note that gl.js is referenced here and custom styles are supported -->
<script charset="utf-8" src="Https://map.qq.com/api/gljs?v=1.exp&key= into your key here"></script>
<script>
  window.onload = function () {
    function init() {
      var map = new TMap.Map(document.getElementById("container"), {
        // At the center of the map, here is the latitude and longitude of the heart-shaped island
        center: new TMap.LatLng(24.932341.118.582993), 
        // Map zoom level, 3 to 20
        zoom: 20.// Map style ID, valid value is "style[number]", bound with key
        mapStyleId: 'style1' 
      });
    }
    init();
  }
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Copy the code

If you have a better color scheme, feel free to show it in the comments.Initialize the map first (the background image of the page is a photo of the hand, the map in the middle layer, and the top image is a PNG with the handle removed).

    // The coordinates of the heart-shaped island
    var hart = new TMap.LatLng(24.932215.118.582971);
    // Start point coordinates
    var home = new TMap.LatLng(39.876019.116.411133);
 
var map = new TMap.Map(document.getElementById("container"), {
        // Map center point
        center: new TMap.LatLng(32.879587.111.972656), 
        // Map zoom level, 3 to 20
        zoom: 4.// Whether to display controls on the map. Default is true
        showControl:false.// Map style ID, valid value is "style[number]", bound with key
        mapStyleId: 'style1' 
      });
// Move the coordinates of the path
var path = [
    home,
    hart
];
Copy the code

Here you can use MultiPolyline to draw a polyline, 520 lines on the map or something like that, and then you can add a color to the line after you’ve gone through it.

She then adds the couple’s picture to the map and markers it with a MultiMarker:

var marker = new TMap.MultiMarker({
      map,
      styles: {
        'car-down': new TMap.MarkerStyle({
          'width': 80.'height': 80.'anchor': {
            x: 40.y: 40,},// Avatar path
          'src': 'images/tj.jpg',}}),geometries: [{
        id: 'car'.styleId: 'car-down'./ / coordinates
        position: home,
      }]
    });
Copy the code

Now we can add animation, try it, animation is asynchronous, there is no callback in the document, also can’t chain call, other than setTimeout do you have any good idea?

Marker. MoveAlong is generally used for trajectory playback, here it is used to move from home to heart-shaped island; Map. EaseTo allows you to animate the map with smooth transitions. Here, zoom in on the map until the heart is fully displayed.

Finally, don’t forget to add “I love you” text label to the map with MultiLabel:

// Click the button
    $("#btn").click(function () {$("#btn").hide();
        // Move along the specified path
        marker.moveAlong({  
          'car': {
            path, // Coordinate array
            speed: 5201314 // Moving speed, positive integer, unit: km/h}})var duration = 2000;
        // Smooth transition to the specified state, mapStatus is key-value format, can set center, zoom, rotation, pitch.
        map.easeTo({center:hart},{duration});// Move the map
        var duration2 = 1000;
        setTimeout(function () {
            map.easeTo({ zoom: 12 }, { duration:duration2 });// Zoom the map
            setTimeout(function () {
                map.easeTo({ zoom: 18 }, { duration:duration2 });
                addLabel();
            }, 3000);
        }, duration);        
    });
 
// Add text annotations
    function addLabel() {
        // Initialize the label
        var label = new TMap.MultiLabel({
            id: 'label-layer'.map: map,
            styles: {
                'label': new TMap.LabelStyle({
                    'color': '#D2000D'.// Color attributes
                    'size': 20.// Text size property
                    'offset': { x: 0.y: 0 }, // The text offset attribute is in pixels
                    'angle': 0.// Text rotation property
                    'alignment': 'center'.// Align text horizontally
                    'verticalAlignment': 'middle' // Text is vertically aligned})},geometries: [{
                'id': 'label'.// Point the flag information of the graph data
                'styleId': 'label'./ / style id
                'position': new TMap.LatLng(24.932711.118.583046), // Mark the point position
                'content': 'I love you'.// Annotate text
                'properties': { // Attribute data for annotation points
                    'title': 'label'}}}); }Copy the code

At this point, we’re done. Feel free to show off your work in the comments.

Original author: Xiao Wuji