高德地图js API实现多点标记marker,多点marker移除和鼠标滑入标点显示提示框
官方API:https://lbs.amap.com/api/javascript-api/guide/abc/prepare
先说下需求吧,我就不往外一段一段的摘了:
分全部和三家运营商,按钮点击,地图中的标点变化
鼠标移入标点,显示此标点的详细信息
比如这样(样式不好看,后期大家自己调吧)
官方样式:https://lbs.amap.com/api/javascript-api/example/infowindow/custom-style-infowindow
1、加载高德脚本
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.13&key=自己申请的key"></script>
2、直接上前端代码吧,见谅
var map = new AMap.Map('container', { //实例化mapresizeEnable: true, //是否监控地图容器尺寸变化zoom: 12, //初始化地图层级center: [113.497811,23.180948], //初始化地图中心点mapStyle: 'amap://styles/82a2dae28bf68171897b099f0caa7f4f', //设置地图的显示样式(我这引入的是个性化地图)});AMap.plugin(['AMap.OverView','AMap.Geolocation'],function(){//异步同时加载多个插件var overView = new AMap.OverView(); //鹰眼显示缩略图map.addControl(overView);var geolocation = new AMap.Geolocation(); //当前位置定位map.addControl(geolocation);});// 多个点实例组成的数组var markerList = []; //标记点 var removeList = []; //移除标记点,容器//ajax异步请求queryYys = function(){var yys = $("#chooseyys").val();var year = $("#queryYear").val();var quarter = $("#queryQuarter").val();var aQuery = {'yys': yys, 'year': year, 'quarter': quarter};var url = " ";$.post(url, aQuery, function(data) { //返回json数据if (data.length >= 1){for(var i = 0;i < data.length; i++){var yys = data[i].yys;var markerYys = new AMap.Marker();markerYys.setPosition([data[i].jingdu, data[i].weidu]);markerYys.setAnimation("AMAP_ANIMATION_DROP");markerYys.setTitle = (data[i].name);if(yys == "dx"){markerYys.setIcon("../image/dianxin.png");}else if(yys == "yd"){markerYys.setIcon("../image/yidong.png");}else if(yys == "lt"){markerYys.setIcon("../image/liantong.png");}markerYys.infoName = data[i].name; //注意此赋值方式markerYys.on('mouseover',function(e){infoWindow.setContent("<div class='infoTitle'>" + e.target.infoName+ "</div>"); //格式,内容自己写(注意取值方式)infoWindow.open(map, e.lnglat);});markerList.push(markerYys);}}addMarker(); //加标记点方法},'json');}var infoWindow = new AMap.InfoWindow({isCustom: true, //使用自定义窗体offset: new AMap.Pixel(16, -45) //窗体偏移位置});map.on('click',function(e){ //点击地图,移除窗体(或者像官方一样加个叉号图片,在绑定点击事件)map.clearInfoWindow();});function addMarker(){ //设置中心点和层级/* var zoom = Math.floor(Math.random() * 7) + 11;var lng = 121.138398 + Math.floor(Math.random() * 589828) / 1e6;var lat = 30.972688 + Math.floor(Math.random() * 514923) / 1e6;map.setZoomAndCenter(zoom, [lng, lat]); //同时设置地图层级与中心点 */removeMark(); //先移除map.add(markerList); //再加点 markerList = []; //清空}function removeMark(){ //移除标注map.remove(removeList); //移除removeList = markerList; //加入到容器中,准备下一次清除}
3、大家不要看着觉得多,其实没啥东西!
没有分开写,大家根据需要看吧
高德地图js API实现多点标记marker,多点marker移除和鼠标滑入标点显示提示框相关推荐
- 高德地图JS API 使用01
最近做项目,有个需求使用到高德地图JS API,现写博客总结一下. 需求要求大概是这样的: 使用地图高德或百度或谷歌都可以(这里吐槽一下,百度地图的jsAPI帮助文档写的太...谷歌你懂的...高德目 ...
- vue 给圆遮盖物添加文字 高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店 由 学院君 创建于2年前, 最后更新于 2年前 版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
- 高德地图js API实现鼠标悬浮于点标记时弹出信息窗体显示详情,点击点标记放大地图操作
高德地图js API实现:鼠标悬浮于点标记时,弹出信息窗体显示详情,点击点标记时放大地图 <!doctype html> <html> <head><meta ...
- 高德地图JS API之海量点标记十万以内的点
高德地图JS API之海量点标记十万以内的点 怎么引入高度地图就不写了,官方是这样说的:当需要在地图展示数量为十万以内的点并且需要较好的性能表现时,可以使用 AMap.MassMarks 类.AMap ...
- cordova下使用高德地图js api在4g流量下定位失败问题的解决
问题描述 cordova页面中使用高德地图js api AMap.Geolocation的geolocation.getCurrentPosition()方法进行定位 用手机4g打开该页面,定位失败, ...
- 在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作 注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者 登陆之后,在进入「应用管理」 页面「创建新应用 ...
- 高德地图 js API Loca 3D动画的使用说明
高德地图 js API Loca 3D动画的使用说明 我们在使用 Loca 制作地图动画时,里面有几个对应的动画效果,有 center: 平移 pitch: 视角 zoom: 缩放 rotation: ...
- Vue 高德地图 js API Loca 如何使用 连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用 连接线图层.脉冲连线图层 阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式 已经了解如何载入 Loca 插件 如果不了解,可以查看我之 ...
- js 调用android定位,基于html5+ 高德地图JS API使用安卓定位sdk用来进行定位
使用Native.js打开Android的H5辅助定位 mui.plusReady(function() { if(plus.os.name == 'Android') { var AMapLocat ...
最新文章
- 没有注册类 (异常来自 HRESULT:0x80040154 (REGDB_E_CLASSNOTREG))
- Idea自带工具解决冲突
- 倒计时几秒_和平精英:倒计时0秒时进圈会不会被淘汰?主播展示极限卡圈
- 深度学习和目标检测系列教程 13-300:YOLO 物体检测算法
- Java中字节输入输出流
- 关于CALayer导致的crash问题
- Elasticsearch--进阶-term_keyword查询---全文检索引擎ElasticSearch工作笔记015
- 检查gzip是否起效
- Harmony OS — DatePicker日期选择器
- 多GPU环境运行实验的一点经验
- 组内连续三个或三个以上Repeated Measures ANOVA
- Atitit. 数据库-----catalog与schema的设计区别以及在实际中使用 获取数据库所有库表 java jdbc php c#.Net
- 【优化求解】基于matlab差分进化算法求解函数极值问题【含Matlab源码 1199期】
- shell脚本学习指南_Shell脚本初学者指南:基础知识
- 怎么用html实现QQ代挂功能,QQ等级每天有几种加速方式
- java setvalue函数,Java IDecisionVariable.setValue方法代碼示例
- Spout 【API 解析】 -spout-bolt-
- 怎么将计算机设置为光盘引导模式,通过bios设置从光盘/光驱启动的方法
- ECS服务器10M带宽能让多少人同时访问?
- Could not load file ‘/etc/sysconfig/network-scripts/ifcfg-lo‘
热门文章
- python金融实战 源代码_Python金融股票爬虫实战源码大全
- 第十三课:树莓派搭建客户端
- 【opencv-python】视频处理(4) cv2.VideoCapture.get()函数、cv2.VideoCapture.set()函数
- 【DL】第 6 章:文本生成转换器
- 华为云对象存储浏览器直接打开,而不是下载
- android主线程报ANR的问题!
- 计算机项目教学法探讨,基于项目教学法的非计算机专业计算机教学的设计和探讨...
- jQuery生成动态表格
- 新项目筹划中。。。。
- MSI驱动指南HOWTO