高德地图多点标记自定义地图

最新推荐文章于 2024-05-07 22:08:25 发布

weixin_30653097

最新推荐文章于 2024-05-07 22:08:25 发布

阅读量1.2k

点赞数 1

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/jone-chen/p/10237882.html

版权

直接代码吧：

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

转载于:https://www.cnblogs.com/jone-chen/p/10237882.html

weixin_30653097

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
高德地图多点标记自定义地图

直接代码吧：<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-s...
复制链接

扫一扫