高德地图上覆盖物polygon方法的使用

最新推荐文章于 2023-11-06 15:07:32 发布

笑道三千

最新推荐文章于 2023-11-06 15:07:32 发布

阅读量3.6k

点赞数 1

分类专栏： # element ui后台管理系列

本文链接：https://blog.csdn.net/weixin_42349568/article/details/118187655

版权

element ui后台管理系列专栏收录该内容

56 篇文章 5 订阅

订阅专栏

一，查看文档，找到的案例

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

二，实现的效果

在这里插入图片描述

笑道三千

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
高德地图上覆盖物polygon方法的使用

一，查看文档，找到的案例<!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">
复制链接

扫一扫