高德地图 多状态业务自适应显示多个点标记

最新推荐文章于 2024-05-01 00:57:09 发布
最新推荐文章于 2024-05-01 00:57:09 发布
阅读量5.2k 收藏 1
点赞数
分类专栏： 地图服务 文章标签： 高德地图 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/love_zngy/article/details/78661741
版权

多个状态业务点在地图上展示，参考了高德地图自适应显示多个点标记，大致上差不多，但是要修改成自己的业务。

1、直接copy高德地图的自适应显示多个点标记html代码，把key修改成自己申请的；

2、下面是我的代码：

ps:要把key换成自己的。

<!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 src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.4.1&key=  "></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body οnlοad="loadMap()">
<div id="container"></div>
<div id="tip">
<a href="javascript:void(0);" style="text-decoration: none;"><input type="radio" id="registereduser" checked ='checked' style="width:15px;height:15px;" οnclick="registereduserClick()"/><span style="color: green">注册用户</span></a> |
    <a href="javascript:void(0);" style="text-decoration: none;"><input type="radio" id="targetuser" checked ='checked' style="width:15px;height:15px;" οnclick="targetuserClick()"/><span style="color:   red">目标用户</span></a> |
    <a href="javascript:void(0);" style="text-decoration: none;"><input type="radio" id="activeuser" checked ='checked' style="width:15px;height:15px;" οnclick="activeuserClick()"/><span style="color:  blue">活跃用户</span></a> |
    <a href="javascript:void(0);

最低0.47元/天 解锁文章
IT燕
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
高德地图显示多个标注点 弹跳效果 title
11-02
使用高德地图显示多个标注点 有 弹跳效果 可自定义 title
vue中使用高德地图打多个点，处理在可视区域显示所有点位
葫芦娃y的博客
02-06 939
vue中使用高德地图打多个点，处理在可视区域显示所有点位
【vue2高德地图api】高德地图forEach批量添加marker点标记，点击获取item对象『全网最详细』(1)
最新发布
2401_84411767的博客
05-01 511
不是之前的手机端项目系列，但是可以参考，以后肯定用得到！我的需求getList获取数据，然后把经纬度，写入到页面中，点击marker标记 可以获得该项数据，例如name或者id之类的。页面已经展示，只看加marker标记点，跳过一、二。
高德地图：批量显示marker+点击marker显示信息框
Stephanie翟倩
05-24 6460
基础应用。
高德地图自适应显示多个标记点的应用
u011998957的博客
09-14 5531
需求： 今天leader给我一个任务，要求实现左边树勾选多个时地图上的点做一个聚合效果，现状是每次勾选都会把当前勾选项的坐标作为中心点定位过去。之前我也没有地图相关的经验，然后就去看高德地图的api： 开始我想做成勾选多个就聚合成一个点的样子，就是我们平时缩小地图时看到的那样，但是我没找到实现方式。后来沟通确认需求是想能同时看到勾选的多个点 实现过程： 一开始看了api的点聚合功能AMap.MarkerClusterer，发现使用这个可以在缩放地图的时候自适应的聚合，它相当于是开启地图的点聚合功能，在
高德地图的多个标注点以及标注文字，标注点的点击
2301_76315784的博客
05-12 800
【代码】高德地图的多个标注点以及标注文字，标注点的点击。
高德地图多个经纬度定位和标记
06-03
这个代码可以实现多个经纬度坐标点的定位和在高德地图上的显示
高德地图标记点聚合，两端聚合
10-21
以上海为中心，模拟300个标记点， 高德地图聚合插件，最明细的节点，是一个通用的样式，插件外无法调整， 这里也对他进行优化，可以控制最明细的节点样式。 web页面，支持windows和ubuntu linux
高德地图画线，单条多条带方向示例
08-28
高德地图画线，单条多条带方向示例 高德地图画线，单条多条带方向示例亲测有效，自己也在使用换成你的key就可以
高德地图 API 实现 自定义创建多个可拉伸锚点矩形。
03-19
原生 JavaScript 仿 有赞商户后台，介入高德地图，实现地图自定义区域矩形划分并绑定 ui 层，几乎每行代码都有注释，方便修改理解。 适用多个项目领域，如：外卖送货、共享单车区域划分、配送商品等。 纯前端...
加载地图的多个点标记.doc
07-22
总的来说，这段代码展示了如何使用高德地图API在地图上加载和显示多个点标记，并通过鼠标悬停事件提供详细信息。这种技术在交通监控、物流追踪、地理信息系统（GIS）等多种场景中都有广泛的应用。通过灵活配置和扩展...
百度地图API同时显示多个标记，可标记自己的所有分公司
11-11
度地图API调用，web网页同时显示多个标记，可标记自己的多个分公司以及点击弹出简介链接到分公司网站等，手机、电脑都适用。
多功能高德地图-多功能路径-电子围栏-定位打卡
12-09
基于vue开发，组件element-ui，功能api高德地图。 本程序包含 多功能路径、电子围栏、定位打卡 功能 结合之前文章将程序源码整理在一起。 代码都已安排注释，下载后先安装node_modules依赖， main.js中配置好密钥 ...
高德地图多坐标展示特效，可用于多店铺寻址
03-14
可结合后台生成多mark，默认实现全国，点击坐标放大层级弹出坐标信息
YisingleMarkerView:可以在高德地图上显示多个infoWindow的库
05-11
这个框架可以在地图上的marker上显示多个infoWindow(高德默认只能同时显示一个infoWindow) 效果图如下: 使用 !!!!! 请在使用前 将高德地图的sdk加到工程中 allprojects { repositories { ... maven { url '...
Android实现高德地图显示及定位
08-25
Android实现高德地图显示及定位是Android开发中非常重要的一个知识点，涉及到地图显示、定位、权限申请等多个方面。在本文中，我们将详细介绍Android实现高德地图显示及定位的步骤和知识点。 高德地图显示 高德...
vue项目 高德地图实现区域多个标点并通过半径距离以此点绘制多个圆（circle），动态显示隐藏圆；实现根据经纬度获取中文地址，根据地址获取经纬度；地图控件显示隐藏
wocwin的博客
05-08 4178
vue项目 高德地图实现区域多个标点并通过半径距离以此点绘制多个圆（circle），动态显示隐藏圆；实现根据经纬度获取中文地址，根据地址获取经纬度；地图控件显示隐藏；vue3+vite+ts项目
高德地图怎么画圈_点标记-覆盖物-教程-地图 JS API | 高德地图API
weixin_39997664的博客
12-21 3579
点标记是用来标示某个位置点信息的一种地图要素，本章介绍如何在地图图面使用点标记，分别包括：点标记 Marker灵活点标记 ElasticMarker圆形标记 CircleMarker文本标记 Text点标记Marker一. 创建一个默认图标的点标记:// 创建一个 Marker 实例：var marker = new AMap.Marker({position: new AMap.LngLat...
vue2实现高德地图 JSAPI 2.0海量点标记(标注和标注图层)-＞自定义点位-＞定时刷新点位
qq_31745863的博客
05-11 3110
1. 需要修改`securityJsCode`和`key`为自己的 2. `allowCollision`为标注是否避让marker,默认为false不避让 3. `markers`为地图上的标记数组 4. `layer`为一个标注层,可以理解为一个图层 5. 流程其实就是将`markers`装载到`layer`再将`layer`装载到map就可以实现了
vue高德地图多个点标记
03-28
在Vue中使用高德地图可以通过引入AMap库实现。在实现多个点标记时，需要先定义一个地图容器，然后通过循环遍历数据数组，在每个数据项上添加一个标记点。 以下是一个简单的示例代码： ```html <template> <div id="map-container" style="height: 400px;"></div> </template> <script> import AMapLoader from '@amap/amap-jsapi-loader'; export default { name: 'Map', data() { return { map: null, // 地图对象 markers: [ // 标记点数据数组 { lnglat: [116.397428, 39.90923], title: 'Marker1' }, { lnglat: [116.397428, 39.90963], title: 'Marker2' }, { lnglat: [116.397928, 39.90963], title: 'Marker3' } ] }; }, async mounted() { await AMapLoader.load({ key: 'your amap key', version: '2.0', plugins: ['AMap.ToolBar'] }); this.initMap(); }, methods: { initMap() { this.map = new window.AMap.Map('map-container', { zoom: 13, center: [116.397428, 39.90923] }); this.addMarkers(); // 添加标记点 }, addMarkers() { this.markers.forEach(marker => { const [longitude, latitude] = marker.lnglat; const markerObj = new window.AMap.Marker({ position: [longitude, latitude], title: marker.title, map: this.map }); markerObj.on('click', () => { console.log(marker.title); }); }); } } }; </script> ``` 在上述代码中，首先通过AMapLoader引入高德地图API，并在mounted钩子函数中初始化地图。然后在addMarkers方法中遍历标记点数据数组，创建标记点对象，设置位置、标题、地图等属性，并在地图上添加标记点对象。最后通过on方法为每个标记点添加点击事件。 在模板中只需要定义一个地图容器元素即可，地图会自动填充该元素的大小。 需要注意的是，在使用高德地图API时需要先申请key，并在引入API时传入key值。同时，由于高德地图API是异步加载的，因此需要使用await关键字等待API加载完毕后再执行地图相关操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值