高德地图多边形覆盖物上点击显示窗体

今天药忘吃喽~ 2022-05-26 12:37 179阅读 0赞

高德地图 覆盖物上点击显示窗体

<!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="http://cache.amap.com/lbs/static/main1119.css"/>
        <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
        <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    </head>
    <body>
    <div id="container"></div>
    <div id="tip">点击地图上的覆盖物试试</div>
    <script type="text/javascript">
        //初始化地图对象，加载地图
        var map = new AMap.Map("container", {
            resizeEnable: true
        });
        var polygonArr = [[116.403322, 39.920255],
            [116.410703, 39.897555],
            [116.402292, 39.892353],
            [116.389846, 39.891365]];
        var polygon = new AMap.Polygon({
            map: map,
            path: polygonArr,//设置多边形边界路径
            strokeColor: "#FF33FF", //线颜色
            strokeOpacity: 0.2, //线透明度
            strokeWeight: 3,    //线宽
            fillColor: "#1791fc", //填充色
            fillOpacity: 0.35//填充透明度
        });
        map.setFitView();
        polygon.on('click', function(e) {
            openInfo(e.lnglat);
        });
        function openInfo(locationaaa) {
            //构建信息窗体中显示的内容
            var info = [];
            info.push("<div><div><img style=\"float:left;\" src=\" http://webapi.amap.com/images/autonavi.png \"/></div> ");
            info.push("<div style=\"padding:0px 0px 0px 4px;\"><b>高德软件</b>");
            info.push("电话 : 010-84107000   邮编 : 100102");
            info.push("地址 :北京市朝阳区望京阜荣街10号首开广场4层</div></div>");
            infoWindow = new AMap.InfoWindow({
                content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
            });
            console.log(map.getCenter())
            console.log(locationaaa)
            infoWindow.open(map, locationaaa);
        }
    </script>
    </body>
    </html>

示例：

![70][]

[70]: /images/20220526/924e9b6468e44baa9ea5dda90d17312b.png