高德地圖多點標記自定義地圖

時間 2019-11-09
標籤地圖多點標記自定義简体版
原文原文鏈接
直接代碼吧：javascript
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>自定義地圖</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
    <!-- <script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/resource/capitals.js'></script> -->
    <script src="https://webapi.amap.com/maps?v=1.4.12&key=您本身的key"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        html,body,#container{height:100%;width:100%;font-size:14px;font-family:"Chinese Quote",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}
        .content-window-card{position:relative;box-shadow:none;bottom:0;left:0;width:auto;padding:0;border-radius:5px;overflow:hidden;}
        .info-top{padding:10px 15px;position:relative;background:#fff;border-bottom:1px solid #ebebeb;}
        .closeX{position:absolute;right:10px;top:2px;font-size:22px;cursor:pointer}
        .info-middle{padding:15px 15px;border-radius:0 0 5px 5px;}
        .info-bottom{height:12px;position:relative}
        .sharp{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid #fff;position:absolute;left:50%;top:0;transform:translate(-50%,0)}
    </style>
</head>

<body>
    <div id="container"></div>
    <script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 5,
        center: [114.047614, 22.600735],
        mapStyle: 'amap://styles/ac617ee5ac942dc438bc8ae1b99b7939',
        viewMode: '3D', //開啓3D視圖,默認爲關閉
        buildingAnimation: true, //樓塊出現是否帶動畫
        //前往建立自定義地圖樣式：https://lbs.amap.com/dev/mapstyle/index
    });
    var capitals = [{
        adcode: "",
        center: [114.063185, 22.60495],
        citycode: "1853",
        name: "星河word",
        text: '這是星河word小區',
        content: "<div class = 'area'>星河word</div>"
    }, {
        adcode: "",
        center: [114.384129, 30.508543],
        citycode: "3803",
        name: "保利華都",
        text: '這是保利華都小區',
        content: "<div class = 'area'>保利華都</div>"

    }]
    //實例化信息窗體
    var title = '提示';

    var infoWindowArr = [],
        facilities = [];
    for (var i = 0; i < capitals.length; i++) {
        var marker = new AMap.Marker({
            position: new AMap.LngLat(capitals[i].center[0], capitals[i].center[1]),
            offset: new AMap.Pixel(-10, -10),
            icon: 'http://vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 圖標 URL
            title: capitals[i].name,
        });
        facilities.push(marker);
        var infoWindow = new AMap.InfoWindow({
            isCustom: true, //使用自定義窗體
            content: createInfoWindow(title, capitals[i].content),
            offset: new AMap.Pixel(0, -20)
        });
        infoWindowArr.push(infoWindow);
    }
    map.add(facilities);

    for (var i = 0; i < facilities.length; i++) {
        (function(i) {
            facilities[i].on('click', function(event) {
                infoWindowArr[i].open(map, event.target.getPosition());
            });
        })(i)
    }


    //構建自定義信息窗體
    function createInfoWindow(title, content) {
        var info = document.createElement("div");
        info.className = "custom-info input-card content-window-card";

        //能夠經過下面的方式修改自定義窗體的寬高
        info.style.width = "300px";
        // 定義頂部標題
        var top = document.createElement("div");
        var titleD = document.createElement("div");
        var closeX = document.createElement("span");
        top.className = "info-top";
        titleD.innerHTML = title;
        closeX.innerHTML = "&times;";
        closeX.className = "closeX";
        closeX.onclick = closeInfoWindow;

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

        // 定義中部內容
        var middle = document.createElement("div");
        middle.className = "info-middle";
        middle.style.backgroundColor = 'white';
        middle.innerHTML = content;
        info.appendChild(middle);

        // 定義底部內容
        var bottom = document.createElement("div");
        bottom.className = "info-bottom";
        var sharp = document.createElement("span");
        sharp.className = "sharp";
        bottom.appendChild(sharp);
        info.appendChild(bottom);
        return info;
    }
    //關閉信息窗體
    function closeInfoWindow() {
        map.clearInfoWindow();
    }
    </script>
</body>

</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。