高德地图：显示地点，点击地点在地图上显示详情

最新推荐文章于 2024-04-30 16:59:14 发布

Stephanie翟

最新推荐文章于 2024-04-30 16:59:14 发布

阅读量4.3k

点赞数 2

分类专栏： # Bootstrap

本文链接：https://blog.csdn.net/a954553391/article/details/106320611

版权

Bootstrap 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

效果图

在这里插入图片描述

高德API示例

示例地址

<!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"/>
    <style type="text/css">
        #panel {
            position: absolute;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
    </style>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    AMap.service(["AMap.PlaceSearch"], function() {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({ 
            pageSize: 6, // 单页显示结果条数
            pageIndex: 1, // 页码
            citylimit: true,  //是否强制限制在设置的城市内搜索
            map: map, // 展现结果的地图实例
            panel: "panel", // 结果列表将在此容器中进行展示。
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        //关键字查询
        placeSearch.search('廊坊师范学院')
    });
</script>
</body>
</html>

关键代码解析

在这里插入图片描述

2.自己实现

如果高德的搜索内容里，没有自己想要的数据，可以结合高德地图，实现相同的功能。

<body >
<div>
 	<p class="contentTitle">社区信息</p>
 	<p th:each="list:${list}" th:text="${list.communityname}" th:onclick="communityInfo([[${list.communityId}]])")></p>
</div>
<script>
 function communityInfo(communityId){
 		//清除地图上其他标注
        map.clearMap();
        $.ajax({
            type: 'get',
            dataType: 'text',
            url:  '/mapImage/queryCommunityInfoById/'+communityId,
            p: [],
            cache: false,
            async: true,
            success: function (p) {
                var p = eval('(' + p + ')');
                for (var i = 0; i < p.rows.length; i++) {
                    var point=[p.rows[i].longitude,p.rows[i].latitude];
                    var marker = new AMap.Marker({
                        position: point,
                        map: map,
                        icon: new AMap.Icon({
                            image: "/img/marker/community.png",
                            imageSize: new AMap.Size(33,35)
                        })
                    });
                    
                    //显示marker
                    unitMarker.push(marker);
                    marker.communityname = p.rows[i].communityname;
                    
                    //点击marker显示信息框
                    marker.on('click', function(p){
                        var content = '<ul style="font-size:15px;">' +
                            '<strong style="color: rgb(24, 166, 137);text-align:left">社区信息</strong>'
                            + '<ul> 社区名称：'+p.target.communityname+'</ul>';
                        // 设置信息框内容
                        infoWindow.setContent(content);

                        //将marker放到指定坐标
                        infoWindow.open(map, p.lnglat);
                    });
                }
            }
        });
    }
</script>