百度地图创建多个Marker标注和标签并设置监听事件

已于 2024-06-21 18:05:37 修改
阅读量4k 收藏 10
点赞数 3
分类专栏： 百度地图 js 文章标签： dubbo
于 2020-11-27 17:38:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46305078/article/details/110235978
版权

这里是另外一篇
百度地图添加SVG矢量图标
在这里插入图片描述
在这里插入图片描述

百度地图接口版本不同，里面的函数有些区别，我用的是以下版本，这个版本创建百度地图需要用
map = new BMapGL.Map(“allmap”);

<script src="//api.map.baidu.com/api?type=webgl&v=2.0&ak=秘钥"></script>

另一个版本也可以用，但是以下版本创建地图是var map = new BMap.Map(“allmap”);

<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=秘钥"></script>

目前来说两个地图所用的函数都差不多，但是在创建矢量图标的时候会有区别。所以我现在的标注图标是服务器取出来的一张图片，而不是svg

这份地图中包括下面几个知识点

  • 百度地图添加多个标注图标定位点
  • 百度地图给多个标注添加监听（左击和右击标注监听）
  • 百度地图Marker标注点上叠加图片
  • 百度地图设置地图风格
  • 百度地图获取地图的地理位置

下面地图用到了两个版本的api，把以上两个都引入

		<div id="allmap" ></div>

			// 地图
function getMap() {
	$
			.ajax({
				url : '/productMonitor/getProductPosition',
				type : 'get',
				dataType : 'json',
				success : function(data) {
					// 百度地图API功能
					map = new BMapGL.Map("allmap");
					var point = new BMapGL.Point(119.3, 26.05);
					map.centerAndZoom(point, 13);
					map.enableScrollWheelZoom(true);
					
					//设置地图样式
						map.setMapStyleV2({
								styleJson : mapStyleBrown
							});
					//样式结束
					
					var pointArray = new Array();
					var positionList = data.positionList;
					if (positionList.length > 0) {
						for (var i = 0; i < positionList.length; i++) {
					

							var position = positionList[i];
							// 经度
							var longitude = position.longitude;
							// 纬度
							var latitude = position.latitude;
							var point = new BMapGL.Point(longitude, latitude);
							
							// 创建标注图标
							var aa = "";
							if (position.login == 0) {
								aa = "/img/productMonitor/lixian.png";
							} else if (position.login == 1) {
								aa = "/img/productMonitor/zaixian.png";
							} else {
								aa = "/img/productMonitor/guzhang.png";
							}
							var myIcon = new BMapGL.Icon(aa, new BMapGL.Size(
									40, 40));
							var marker = new BMapGL.Marker(point, {
								icon : myIcon,
							});
							map.addOverlay(marker);
							//标注结束
							
							//给标注添加一张图片,其实就是自定义覆盖物，创建了一个div，背景图片设置成我们自己的图片，然后设置边角圆化成圆形，再调整div的位置就叠加上去了。
						function ComplexCustomOverlay(point) {
								this._point = point;
							}
							ComplexCustomOverlay.prototype = new BMapGL.Overlay();
							ComplexCustomOverlay.prototype.initialize = function(
									map) {
								this._map = map;
								var arrow = this._arrow = document
										.createElement("div");
								var s = "/img/productMonitor/"
										+ position.productType + ".png";
								arrow.style.background = "url(" + s
										+ ") no-repeat center";
								arrow.style.position = "absolute";
								arrow.style.width = "29px";
								arrow.style.height = "29px";
								arrow.style.borderRadius = "3px";
								arrow.style.backgroundSize = "contain";
								map.getPanes().labelPane.appendChild(arrow);
								return arrow;
							}
							ComplexCustomOverlay.prototype.draw = function() {
								var map = this._map;
								var pixel = map
										.pointToOverlayPixel(this._point);
								this._arrow.style.left = pixel.x - 14 + 'px';
								this._arrow.style.top = pixel.y - 16 + "px";
							}
							var myCompOverlay = new ComplexCustomOverlay(point);

							map.addOverlay(myCompOverlay);
							//给标注添加一张图片结束

							// 标注监听
							pointArray[i] = new BMapGL.Point(longitude,
									latitude);

							var clickFunction = function(i) {
								return function(event) {
									//这个是我自己的一个方法
									getOne(i);
								};
							}(position.vin);

							var rightclickFunction = function(v1,v2) {
								return function(event) {
									//这个是我自己的一个方法，获取地理位置
									getStatus(v1,v2);
								};
							}(position.longitude,position.latitude);
							
							marker.addEventListener("click", clickFunction);
							marker.addEventListener('rightclick',
									rightclickFunction);
						
					// 标注监听结束
					
							// 编写自定义函数,创建标签
							var label = new BMapGL.Label(position.vin, {
								offset : new BMapGL.Size(5, -35)
							});
							label.setStyle({
								color : "#0d7e84e0",
								fontSize : "14px",
								backgroundColor : "#0b1b2bff",
								border : "0",
								fontWeight : "bold",
								borderRadius : "3px",
							});
							marker.setLabel(label);
					// 标签结束
					
					// 让所有点在视野范围内，不设置的话，
					//那么地图的大小会是前面设置的中心点和缩放倍数，
					//那么有的标注会看不到，需要你缩小地图才能看到
						map.setViewport(pointArray);
						}
					}
				},
				error : function() {
					alert('服务器超时，请重试！');
				}
			});
}



function getStatus(longitude,latitude) {
		// 根据坐标得到地址描述
			var myGeo = new BMap.Geocoder({
				extensions_town : true
			});
		
			myGeo.getLocation(new BMap.Point(longitude, latitude),
					function(result) {
						if (result) {
						alert(result.address);
							
						}
					});
}


var mapStyleBrown = [ {
	"featureType" : "land",
	"elementType" : "geometry",
	"stylers" : {
		"color" : "#0b1b2bff"
	}
}, {
	"featureType" : "water",
	"elementType" : "geometry",
	"stylers" : {
		"color" : "#1c3345ff"
	}
}, {
	"featureType" : "water",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#ffffff66",
		"weight" : 10
	}
}, {
	"featureType" : "water",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffff1a"
	}
}, {
	"featureType" : "green",
	"elementType" : "geometry",
	"stylers" : {
		"color" : "#1422151a"
	}
}, {
	"featureType" : "building",
	"elementType" : "geometry.fill",
	"stylers" : {
		"color" : "#4a90e21a"
	}
}, {
	"featureType" : "building",
	"elementType" : "geometry.stroke",
	"stylers" : {
		"color" : "#ffffff0"
	}
}, {
	"featureType" : "manmade",
	"elementType" : "geometry",
	"stylers" : {
		"color" : "#12223d33"
	}
}, {
	"featureType" : "manmade",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#ffffff26"
	}
}, {
	"featureType" : "manmade",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffff0"
	}
}, {
	"featureType" : "subwaystation",
	"elementType" : "geometry",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "education",
	"elementType" : "geometry",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "education",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#ffffff26",
		"weight" : 10
	}
}, {
	"featureType" : "education",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffff0"
	}
}, {
	"featureType" : "medical",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "medical",
	"elementType" : "geometry",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "scenicspots",
	"elementType" : "geometry",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "scenicspots",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "entertainment",
	"elementType" : "geometry",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "estate",
	"elementType" : "geometry",
	"stylers" : {
		"color" : "#4a90e226"
	}
}, {
	"featureType" : "shopping",
	"elementType" : "geometry",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "transportation",
	"elementType" : "geometry",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "transportation",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "highway",
	"elementType" : "geometry.fill",
	"stylers" : {
		"color" : "#1b344eff"
	}
}, {
	"featureType" : "highway",
	"elementType" : "geometry.stroke",
	"stylers" : {
		"color" : "#ffffff0"
	}
}, {
	"featureType" : "nationalway",
	"elementType" : "geometry.fill",
	"stylers" : {
		"color" : "#1b344eff"
	}
}, {
	"featureType" : "nationalway",
	"elementType" : "geometry.stroke",
	"stylers" : {
		"color" : "#ffffff0"
	}
}, {
	"featureType" : "provincialway",
	"elementType" : "geometry.fill",
	"stylers" : {
		"color" : "#1b344eff"
	}
}, {
	"featureType" : "provincialway",
	"elementType" : "geometry.stroke",
	"stylers" : {
		"color" : "#ffffff00"
	}
}, {
	"featureType" : "cityhighway",
	"elementType" : "geometry.fill",
	"stylers" : {
		"color" : "#1b344eff"
	}
}, {
	"featureType" : "cityhighway",
	"elementType" : "geometry.stroke",
	"stylers" : {
		"color" : "#ffffff0"
	}
}, {
	"featureType" : "arterial",
	"elementType" : "geometry.fill",
	"stylers" : {
		"color" : "#1b344eff"
	}
}, {
	"featureType" : "arterial",
	"elementType" : "geometry.stroke",
	"stylers" : {
		"color" : "#ffffff0"
	}
}, {
	"featureType" : "tertiaryway",
	"elementType" : "geometry.fill",
	"stylers" : {
		"color" : "#1b344eff"
	}
}, {
	"featureType" : "tertiaryway",
	"elementType" : "geometry.stroke",
	"stylers" : {
		"color" : "#ffffff00"
	}
}, {
	"featureType" : "fourlevelway",
	"elementType" : "geometry.fill",
	"stylers" : {
		"color" : "#1b344eff"
	}
}, {
	"featureType" : "fourlevelway",
	"elementType" : "geometry.stroke",
	"stylers" : {
		"color" : "#ffffff00"
	}
}, {
	"featureType" : "local",
	"elementType" : "geometry.fill",
	"stylers" : {
		"color" : "#1b344eff"
	}
}, {
	"featureType" : "local",
	"elementType" : "geometry.stroke",
	"stylers" : {
		"color" : "#ffffff00"
	}
}, {
	"featureType" : "scenicspotsway",
	"elementType" : "geometry.fill",
	"stylers" : {
		"color" : "#1b344eff"
	}
}, {
	"featureType" : "scenicspotsway",
	"elementType" : "geometry.stroke",
	"stylers" : {
		"color" : "#ffffff0"
	}
}, {
	"featureType" : "universityway",
	"elementType" : "geometry.fill",
	"stylers" : {
		"color" : "#1b344eff"
	}
}, {
	"featureType" : "universityway",
	"elementType" : "geometry.stroke",
	"stylers" : {
		"color" : "#ffffff0"
	}
}, {
	"featureType" : "vacationway",
	"elementType" : "geometry.fill",
	"stylers" : {
		"color" : "#1b344eff"
	}
}, {
	"featureType" : "vacationway",
	"elementType" : "geometry.stroke",
	"stylers" : {
		"color" : "#ffffff0"
	}
}, {
	"featureType" : "railway",
	"elementType" : "geometry",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "subway",
	"elementType" : "geometry",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "highwaysign",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "highwaysign",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "highway",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#4a90e2ff",
		"weight" : 10
	}
}, {
	"featureType" : "subwaylabel",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "subwaylabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "tertiarywaysign",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "tertiarywaysign",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "provincialwaysign",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "provincialwaysign",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "nationalwaysign",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "nationalwaysign",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "highwaysign",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"weight" : 10
	}
}, {
	"featureType" : "nationalwaysign",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"weight" : 10
	}
}, {
	"featureType" : "provincialwaysign",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"weight" : 10
	}
}, {
	"featureType" : "highway",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffffa"
	}
}, {
	"featureType" : "nationalway",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#4a90e2ff",
		"weight" : 10
	}
}, {
	"featureType" : "nationalway",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffff1a"
	}
}, {
	"featureType" : "provincialway",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#4a90e2ff",
		"weight" : 10
	}
}, {
	"featureType" : "provincialway",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffff1a"
	}
}, {
	"featureType" : "cityhighway",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#4a90e2ff",
		"weight" : 10
	}
}, {
	"featureType" : "cityhighway",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffff1a"
	}
}, {
	"featureType" : "arterial",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#4a90e2ff",
		"weight" : 10
	}
}, {
	"featureType" : "arterial",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffff1a"
	}
}, {
	"featureType" : "arterial",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "tertiaryway",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#4a90e2ff",
		"weight" : 10
	}
}, {
	"featureType" : "tertiaryway",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffff1a"
	}
}, {
	"featureType" : "tertiaryway",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "fourlevelway",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#4a90e2ff",
		"weight" : 10
	}
}, {
	"featureType" : "fourlevelway",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffff1a"
	}
}, {
	"featureType" : "fourlevelway",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "local",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#4a90e2ff",
		"weight" : 10
	}
}, {
	"featureType" : "local",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffff1a"
	}
}, {
	"featureType" : "local",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "airportlabel",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "airportlabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "scenicspotslabel",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "scenicspotslabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "educationlabel",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#4a90e240"
	}
}, {
	"featureType" : "educationlabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "educationlabel",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffff0"
	}
}, {
	"featureType" : "medicallabel",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "medicallabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "entertainmentlabel",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "entertainmentlabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "estatelabel",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#4a90e299"
	}
}, {
	"featureType" : "estatelabel",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffff00"
	}
}, {
	"featureType" : "estatelabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "businesstowerlabel",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "businesstowerlabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "companylabel",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "companylabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "governmentlabel",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#4a90e266"
	}
}, {
	"featureType" : "governmentlabel",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffff0"
	}
}, {
	"featureType" : "governmentlabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "poilabel",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "poilabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "restaurantlabel",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "restaurantlabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "hotellabel",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "hotellabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "shoppinglabel",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "shoppinglabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "carservicelabel",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "carservicelabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "lifeservicelabel",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "lifeservicelabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "transportationlabel",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "transportationlabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "financelabel",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "financelabel",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "continent",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#333333ff"
	}
}, {
	"featureType" : "continent",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffffff"
	}
}, {
	"featureType" : "city",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#4a90e280"
	}
}, {
	"featureType" : "city",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffff1a"
	}
}, {
	"featureType" : "city",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "district",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "town",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#4a90e280"
	}
}, {
	"featureType" : "town",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffff0"
	}
}, {
	"featureType" : "village",
	"elementType" : "labels.text.fill",
	"stylers" : {
		"color" : "#4a90e280"
	}
}, {
	"featureType" : "village",
	"elementType" : "labels.text.stroke",
	"stylers" : {
		"color" : "#ffffff00"
	}
}, {
	"featureType" : "educationlabel",
	"elementType" : "labels.text",
	"stylers" : {
		"fontsize" : 28
	}
}, {
	"featureType" : "governmentlabel",
	"elementType" : "labels.text",
	"stylers" : {
		"fontsize" : 28
	}
}, {
	"featureType" : "roadarrow",
	"elementType" : "labels.icon",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "educationlabel",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
}, {
	"featureType" : "education",
	"elementType" : "labels",
	"stylers" : {
		"visibility" : "off"
	}
} ]
welloffG
关注
专栏目录
百度API 批量添加标注和监听标注点击事件
DIY
12-05 4866
只是个原型。看到他们批量标注监听标注要闭包。其实2.0后可以直接监听标注事件。翻了百度地图API手册和demo N次，花了一上午终于搞定了 还是记录下来。原理：首先添加标注点和标签，然后监听标注点标签click事件，获得标签点击事件， 得到标注点的经纬度信息
百度地图创建多个marker并为其设置点击事件
MasssA
02-10 2338
//options集合 final List<OverlayOptions> options = new ArrayList<OverlayOptions>(); //设置marker坐标 BitmapDescriptor bitmap = BitmapDescriptorFactory.fro...
百度地图——点标记及点击弹窗显示
xiaoququ的博客
12-07 3342
自定义图片标记点，多个样式不同的lable点击点展示弹窗，展示图片和录音播放暂停
Android 百度地图SDK 自动定位、标记定位
最新发布
2401_85700009的博客
06-26 1056
Android学习是一条漫长的道路，我们要学习的东西不仅仅只有表面的 技术，还要深入底层，弄明白下面的 原理，只有这样，我们才能够提高自己的竞争力，在当今这个竞争激烈的世界里立足。人生不可能一帆风顺，有高峰自然有低谷，要相信，那些打不倒我们的，终将使我们更强大，要做自己的摆渡人。资源持续更新中，欢迎大家一起学习和探讨。
百度地图自定义Marker本地图片不显示的问题
yuwenwenwenwenyu的博客
01-22 829
var imgUrl = require('本地图片路径')let point = new Bmap.Point(经度, 纬度)
百度地图的使用---1、标注（Marker）的使用以及自定义样式
weixin_43905297的博客
09-11 3966
使用百度地图Marker标记，更改图标样式
百度地图多个marker+窗口信息+聚合
07-12
利用百度地图api，ThinkPHP5后台框架模拟数据，多个marker展示，marker窗口信息，点聚合
百度地图创建多个marker和监听事件
热门推荐
yellowabul的博客
05-08 1万+
先说说我的问题吧。我的需求是，在地图上自动创建n个标记，每个点有对应的ID,Lon,Lat，当点击指定标记弹出对应标记的信息，监听事件是一样的，但弹出来的信息要根据对应的标记来显示。 一开始我是这样写js的： var jsonMarkers =eval('('+''+')'); //从后台获取一个json对象，里面是n个标记的信息 for (var i = 0;
百度地图SDK for Android【事件监听】
forlong401的专栏--有问题上：http://www.androidren.com
06-06 1326
http://blog.csdn.net/baidulbs/article/details/8562888 1一般事件监听         在初始化地图Activity时，注册一般事件监听，并实现MKGeneralListener的接口处理相应事件，将mBMapMan.init("我的Key", null)替换为下面的代码： [java] view plain
百度地图上多个marker添加监听，但是总是监听到一样的值
weixin_46305078的博客
10-30 432
今天做项目的时候，在百度地图上多个marker添加监听，但是总是监听到一样的值，监听到最后一个值。 错误的写法 for (var i = 0; i < positionList.length; i++) { var position = positionList[i]; var point = new BMapGL.Point(position.longitude, position.latitude); // 创建标注图标 var myIcon = ne
百度地图添加多个标注点
竹亦叶同的博客
10-22 1891
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {
百度地图 标注 显示信息 Marker单击事件 代码参考
qq_35521087的博客
08-03 1165
package com.renhui.android.project_baidumap; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.text.TextUtils; import android.util.DisplayMetrics; import andro
百度地图添加标注并每个标注对应不同信息源码带注释
06-16
百度地图添加标注并每个标注对应不同信息源码带注释
百度地图API显示多个标注点添加百度样式检索窗口
09-03
百度地图API显示多个标注点，并添加百度样式检索窗口
百度地图API显示多个标注点信息
02-28
百度地图API通过经纬度显示地理位置，并显示该位置的所有相关信息
百度地图多个marker展示infowindow
04-16
百度地图上展示多个marker的同时，能展示多个infowindow，避免只有最后一个infowindow能展示的问题。 博客地址：http://blog.csdn.net/qq_19666821/article/details/70195267
百度地图api实现部分功能，根据多个坐标连成轨迹、坐标拾取、实现多个标注点并带信息窗口
05-19
在本文中，我们将深入探讨如何使用百度地图API来实现一系列关键功能，包括连接多个坐标以形成轨迹、坐标拾取、以及创建带有信息窗口的多个标注点。这些功能在Web应用开发、JavaScript工具包、企业应用以及GIS/地图/...
百度地图api实现运动轨迹、坐标拾取、多点标注并显示信息窗体
12-22
如果需要同时显示多个标记，可以创建多个`Marker`对象并将其添加到地图的`MarkerLayer`中。 2. **根据不同状态显示不同的信息窗口样式**：信息窗口通常用于展示标记关联的信息，如地点名称、地址等。在百度地图API...
百度地图通过id获取Marker触发Marker已经设置的点击事件
06-09
在百度地图SDK中，可以通过调用 `BaiduMap` 对象的 `getMarkerById()` 方法来获取指定id的 `Marker` 对象。获取到 `Marker` 对象后，可以通过调用 `Marker` 对象的 `performClick()` 方法来触发该 `Marker` 已经设置的点击事件。例如： ```java // 获取指定id的Marker对象 Marker marker = (Marker) baiduMap.getMarkerById(markerId); if (marker != null) { // 触发Marker已经设置的点击事件 marker.performClick(); } ``` 在这个示例中，我们首先通过调用 `getMarkerById()` 方法获取指定id的 `Marker` 对象，然后判断返回的 `Marker` 对象是否为空，如果不为空就调用 `performClick()` 方法触发该 `Marker` 已经设置的点击事件。注意，如果该 `Marker` 没有设置点击事件，调用 `performClick()` 方法将不会有任何效果。同时，需要确保在调用 `performClick()` 方法之前，地图已经加载完成并且该 `Marker` 已经添加到了地图上。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值