Golden Map--Encapsulation of Controls--1

Posted by shawnyoung on Thu, 22 Aug 2019 11:20:55 +0200

Preface

With the popularity of maps, there may be many beginners like me who spend a lot of effort in understanding common map controls. So, today we mainly share some plug-in encapsulation of map control.
Direction involved
Today, the main learning direction is Gaode Map, and Baidu Map will be added to the subsequent sharing. Now I'm assuming that everyone knows about maps. It's limited to the encapsulation of plug-ins and so on. I am also a stranger in knowledge, I hope you can point out any problems. In order to improve in the future.
Topic
Three parts
1. marker Points and Information Forms in Maps
2. Examples of related controls in maps
3. Mouse style switching in maps - the simplest, just by the way.

1.marker points and information forms
Effect Show

(1) We need to prepare such a css style in advance.

html,
        body,
        #container {
            height: 98%;
            width: 100%;
        }

        .content-window-card {
            position: relative;
            box-shadow: none;
            bottom: 0;
            left: 0;
            width: auto;
            padding: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .custom-info {
            border: solid 1px silver;
        }

        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }

        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }

        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }

        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }

        div.info-middle {
            font-size: 12px;
            padding: 10px 6px;
            line-height: 20px;
        }

        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }

        div.info-bottom img {
            position: relative;
            z-index: 104;
        }

        span {
            margin-left: 5px;
            font-size: 11px;
        }

        .info-middle img {
            float: left;
            margin-right: 6px;
        }

(2) Next is the js file we need

/**  
 * Place maker with message box 
 * @param {*} obj Object Form
 * @param {*} obj.how  Which instance's map call
 * @param {*} obj.position  Map Location Point Array Form [lng,lat]
 * @param {*} obj.title     Header Title of Form
 * @param {*} obj.content   Form's internal information array form ex: If it's paragraph form, you need to separate paragraphs into array elements in turn.
 * @param {*} obj.flag      Tag Point Display Style Default false Blue
 */
function getAMarker(obj) {
    addMarker();
    //Add marker tags
    function addMarker() {
        if (obj.flag) {
            var icon = "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";
        } else {
            var icon = "";
        }
        var marker = new AMap.Marker({
            map: obj.how,
            position: obj.position,
            icon: icon,
        });
        // Call Setup Form
        var infoWindow = setInfo(obj.title, obj.content)
        //Click marker to pop up a custom information form
        AMap.event.addListener(marker, 'click', function () {
            infoWindow.open(obj.how, marker.getPosition());
        });
    }

    // Set up the form we want
    function setInfo(title, content) {
        var infoWindow = new AMap.InfoWindow({
            isCustom: true, //Use custom forms
            content: createInfoWindow(title, content.join("<br/>")),
            offset: new AMap.Pixel(16, -45)
        });
        return infoWindow;
    }

    //Build a custom information form
    function createInfoWindow(title, content) {
        var info = document.createElement("div");
        info.className = "custom-info input-card content-window-card";

        //You can modify the width and height of your custom form in the following way
        info.style.width = "250px";
        // Define the top title
        var top = document.createElement("div");
        var titleD = document.createElement("div");
        var closeX = document.createElement("img");
        top.className = "info-top";
        titleD.innerHTML = title;
        closeX.src = "https://webapi.amap.com/images/close2.gif";
        closeX.onclick = closeInfoWindow;

        top.appendChild(titleD);
        top.appendChild(closeX);
        info.appendChild(top);

        // Define the central content
        var middle = document.createElement("div");
        middle.className = "info-middle";
        middle.style.backgroundColor = 'white';
        middle.innerHTML = content;
        info.appendChild(middle);

        // Define the bottom content
        var bottom = document.createElement("div");
        bottom.className = "info-bottom";
        bottom.style.position = 'relative';
        bottom.style.top = '0px';
        bottom.style.margin = '0 auto';
        var sharp = document.createElement("img");
        sharp.src = "https://webapi.amap.com/images/sharp.png";
        bottom.appendChild(sharp);
        info.appendChild(bottom);
        return info;
    }

    //Close the Information Form
    function closeInfoWindow() {
        obj.how.clearInfoWindow();
    }
}

(3) Information Format of Information Form
As long as there are paragraphs, they are written as array elements

var data = [{
    title: 'Changning Road<span style="font-size:11px;color:#F00; "> Price: 666 </span>',
    content: ["<img src='http://Tpc.google syndication.com/simgad/5843493769827749134'> Address: Changning Road,""Tel: 151-45561,"<a href='https://www.baidu.com'> Details </a>"
}]

(4) Call method

var map = new AMap.Map("container", {
            resizeEnable: true,
            center:[lng, lat],
            zoom: 13
        });
getAMarker({
            how: map,
            position: [lng, lat],
            title: data[0].title,
            content: data[0].content,
            flag: true
        });

The encapsulation of almost the first component has been completed. Two other plug-ins will be encapsulated next time. I hope you can point out my shortcomings and correct them later.

Topics: Amap Google