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

效果图

高德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)})});//显示markerunitMarker.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>

关键代码解析

高德地图：显示地点，点击地点在地图上显示详情相关推荐

微信小程序内使用echart实现中国地图，点击省跳转省地图，再点击市跳转到市区详情
目的:在微信小程序内实现一张中国地图,上面要写上一些全国数据,点击省 => 省地图,并请求数据,点击市区 => 跳转到市区地图这样一个功能,具体实现效果如下: 思路: 1.首先我们要先画 ...
所有用户登陆后都在桌面上显示计算机图标,如何在Win10桌面上显示计算机.控制面板.网络.用户的文件图标?...
如何在Win10桌面上显示"计算机.控制面板.网络.用户的文件"图标? Win10正式版中"计算机/这台电脑"已更名为"此电脑" 默认情况下 ...
服务器上显示叹号是什么意思,服务器上显示黄色叹号
服务器上显示黄色叹号内容精选换一换当在服务器上成功部署SSL证书后,通过https://+域名的方式访问网站时,显示无法打开网站.可能原因一:未开启443端口可能原因二:配置文件未配置正确请根据 ...
地图的legend点击事件_3D地图的定时高亮和点击事件
技术选型文章所选技术栈:vue.echarts.echarts-gl 安装Vue和echarts 1.安装echarts和echarts-al npm i echarts --save npm i ...
echart移上去显示内容_echarts如何移动到柱状图上显示自己想显示的提示信息
首先把series里面的数据换成含有value的对象 nameArr是显示x轴显示的名称,dataArr是series显示的数据 let nameArr=[],dataArr=[]; for(let ...
计算机无法连接网络显示错误651,电脑宽带连不上显示错误651是什么意思?
可能故障原因1:网卡驱动故障 1.首先考虑网卡驱动问题,这个问题比较常见,右键点击桌面计算机--属性,如下图所示! 2.在计算机属性页面选择"设备管理器"进入! 3.在设备管理器页 ...
Html显示缩略图点击展示,JS点击缩略图整屏居中放大图片效果
需要实现的效果图: 今天开发的时候,遇到要点击缩略图之后居中显示图片的大图查看(大致效果如上图所示)~想了好几种实现方式,最开始的时候,是想通过animate来点击图片进行显示,可是后来当我想要让放大 ...
华为手机如何调时间显示_华为手机不亮屏也能显示时间日期？10秒就能设置，原来这么简单...
不知道各位在想要查看时间的时候,是不是从口袋中拿出手机,然后按下锁屏键亮屏查看时间之后再按锁屏键熄屏的呢?但是还有一种更加简单的方法不需要亮屏就可以查看时间日期. 这个功能就是华为手机的"灭 ...
adb发送什么命令能在手机屏幕弹窗显示_Android 手机投屏在 Ubuntu 上的方法
你知道如何将Android手机投屏到Linux系统吗?本文就以 Scrcpy 软件为例,来讲解一下如何将Android手机投屏到Ubuntu系统. Scrcpy 介绍首先,我们来认识一下Scrcpy ...
3D模型在网页上显示
3D模型在网页上显示,这绝对是未来的趋势,也是热门.一部"阿凡达"让电影节发生了一次地震,让人们感到3D的时代到来.那么我们IT界呢?如果各位因工作时间繁忙,或者嫌上海世博会人山人 ...

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

效果图

高德API示例

关键代码解析

2.自己实现

关键代码解析

高德地图：显示地点，点击地点在地图上显示详情相关推荐

最新文章

热门文章