高德地图js API实现多点标记marker，多点marker移除和鼠标滑入标点显示提示框

╰半夏微凉° 2022-02-28 09:10 1157阅读 0赞

官方API：[https://lbs.amap.com/api/javascript-api/guide/abc/prepare][https_lbs.amap.com_api_javascript-api_guide_abc_prepare]

先说下需求吧，我就不往外一段一段的摘了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM_size_16_color_FFFFFF_t_70]分全部和三家运营商，按钮点击，地图中的标点变化  
鼠标移入标点，显示此标点的详细信息  
比如这样（样式不好看，后期大家自己调吧）  
官方样式：[https://lbs.amap.com/api/javascript-api/example/infowindow/custom-style-infowindow][https_lbs.amap.com_api_javascript-api_example_infowindow_custom-style-infowindow]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM_size_16_color_FFFFFF_t_70 2]

**1、加载高德脚本**

<script src="https://webapi.amap.com/maps?v=1.4.13&key=自己申请的key"></script>

**2、直接上前端代码吧，见谅**

var map = new AMap.Map('container', {			//实例化map
    	        resizeEnable: 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、大家不要看着觉得多，其实没啥东西！  
没有分开写，大家根据需要看吧**

[https_lbs.amap.com_api_javascript-api_guide_abc_prepare]: https://lbs.amap.com/api/javascript-api/guide/abc/prepare
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM_size_16_color_FFFFFF_t_70]: /images/20220228/0e47223d177b4f62be526f52d4d1f3c5.png
[https_lbs.amap.com_api_javascript-api_example_infowindow_custom-style-infowindow]: https://lbs.amap.com/api/javascript-api/example/infowindow/custom-style-infowindow
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM_size_16_color_FFFFFF_t_70 1]: /images/20220228/931d1f3de25c4dca86f16b2bd4c62e01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM_size_16_color_FFFFFF_t_70 2]: /images/20220228/359f63a78de549e0bf4ad1196f92e7a3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1157人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp+高德地图开发APP自定义marker弹出框教程

需求背景 uniapp+nvue+高德地图开发APP，不是小程序，效果图如下，该效果图是教程二实现的。 \-----------------------自定义marke

àì夳堔傛蜴生んèń/ 2024年02月05日 19:23/ 0 赞/ 67 阅读

相关微信小程序多点定位marker标点polyline连线

成品预览图 ![在这里插入图片描述][d46807a4bfcf4accad618f0a42967f39.gif_pic_center] 上代码： js Page

左手的ㄟ右手/ 2023年09月23日 19:05/ 0 赞/ 128 阅读

相关高德地图地图层级不同显示marker数量不同

页面渲染获取经纬度数据（mapData）以后初始化地图initMap()方法页面效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

小灰灰/ 2023年02月17日 05:07/ 0 赞/ 186 阅读

相关 Vue-AMap初级实战之一(3d地图加载多marker点-标记方式闪动)

项目需求：在3d地图上面绘制车辆，并能实时监控车辆轨迹(3d地图加载多marker点并订阅单车轨迹--点标记方式闪动) 技术实现：由于是个闭环的路径，所以实时的转圈的路径轨

雨点打透心脏的1/2处/ 2022年12月01日 15:56/ 0 赞/ 452 阅读

相关高德地图api显示标记点及封闭区域

直接上代码 -------------------- 先编写一个取经纬度页面(该页面使用的是百度地图坐标转高德地图坐标)，将得到的经纬度存到

曾经终败给现在/ 2022年09月10日 06:26/ 0 赞/ 563 阅读

相关高德地图-删除多个指定点标记

1、问题背景高德地图上标记多个标记，点击删除按钮，可以删除指定的几个点标记 2、实现源码 <!DOCTYPE html> <html

r囧r小猫/ 2022年07月15日 05:26/ 0 赞/ 457 阅读

相关高德地图-删除多个点标记

1、问题背景高德地图上有自己创建的marker，单击删除按钮，可以删除多个标记 2、实现源码 <!DOCTYPE html> <ht

绝地灬酷狼/ 2022年07月15日 05:25/ 0 赞/ 421 阅读

相关安卓百度地图显示地图上所有的点(Marker)

由于公司项目中有这样的需求，需要一键显示当前项目中所有的marker点。最开始没有仔细看百度地图的api，所以自己想解决办法。开始的想法是：获取到所有点的最大经度

迷南。/ 2022年03月15日 04:56/ 0 赞/ 531 阅读

相关高德地图js API实现多点标记marker，多点marker移除和鼠标滑入标点显示提示框

官方API：[https://lbs.amap.com/api/javascript-api/guide/abc/prepare][https_lbs.amap.com_api

╰半夏微凉°/ 2022年02月28日 09:10/ 0 赞/ 1158 阅读

相关 uni-app 地图标记点循环显示所有marker

<template> //uniapp 地图插件引入 <view class="uni-common-mt" style="margin:0">

你的名字/ 2021年09月07日 06:06/ 2 赞/ 2529 阅读