高德地图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', {			//实例化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、大家不要看着觉得多,其实没啥东西!
没有分开写,大家根据需要看吧

  • 3
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
你可以在高德地图Marker对象中添加鼠标事件监听器,来实现鼠标移入显示label详细信息的功能。具体的实现步骤如下: 1. 创建Marker对象时,设置label属性为一个AMap.Text对象,用于显示详细信息。 ```javascript var marker = new AMap.Marker({ position: [lng, lat], label: { content: '详细信息', offset: new AMap.Pixel(0, -20) // 设置label偏移量,使其显示Marker上方 } }); ``` 2. 给Marker对象添加mouseover和mouseout事件监听器,在鼠标移入和移出时显示或隐藏label。 ```javascript marker.on('mouseover', function (e) { marker.setLabel({ content: '详细信息', offset: new AMap.Pixel(0, -20), visible: true // 显示label }); }); marker.on('mouseout', function (e) { marker.setLabel({ visible: false // 隐藏label }); }); ``` 完整的代码示例: ```javascript var map = new AMap.Map('container', { zoom: 13, center: [116.397428, 39.90923] }); var markers = [ {lnglat: [116.405285, 39.904989], info: '北京市'}, {lnglat: [121.472644, 31.231706], info: '上海市'}, {lnglat: [113.280637, 23.125178], info: '广州市'}, {lnglat: [114.066112, 22.548515], info: '深圳市'} ]; for (var i = 0; i < markers.length; i++) { var marker = new AMap.Marker({ position: markers[i].lnglat, label: { content: markers[i].info, offset: new AMap.Pixel(0, -20) } }); marker.on('mouseover', function (e) { marker.setLabel({ content: e.target.getExtData().info, offset: new AMap.Pixel(0, -20), visible: true }); }); marker.on('mouseout', function (e) { marker.setLabel({ visible: false }); }); marker.setExtData(markers[i]); // 将详细信息存储在Marker对象的扩展数据中 marker.setMap(map); } ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值