精华内容
下载资源
问答
  • 将用户切换的城市设为中心显示 map.centerAndZoom(cityName,12);...将marker标注居中显示 map.setCenter(points) //points是点的坐标   转载于:https://www.cnblogs.com/xhrr/p/11287295.html...

     将用户切换的城市设为中心显示

    map.centerAndZoom(cityName,12);
    

      

    将marker标注居中显示

    map.setCenter(points)     //points是点的坐标
    

      

    转载于:https://www.cnblogs.com/xhrr/p/11287295.html

    展开全文
  • marker标注居中显示

    2021-03-03 17:46:29
    this.map.setCenter(lnglatXY) // var lnglatXY = [tip.location.lng,tip.location.lat] 经纬度

    在这里插入图片描述

    this.map.setCenter(lnglatXY)   // var lnglatXY = [tip.location.lng,tip.location.lat] 经纬度
    
    展开全文
  • 地图marker标注; marker多点定位; 仿滴滴可拖动marker点; 搜索列表、搜索历史记录、搜索地点定位; 定位移动复位到当前位置; 实时显示定位详细地址信息; 登录、登出功能; 打卡功能; 个人中心; ...继续更新中...
  • 百度地图marker标注上如何加上数字

    千次阅读 2018-05-05 18:26:56
    网上找了好多方法还没有找到合适的,因为百度地图marker上所展现的数字其实是用背景图来实现,所以想了个比较笨的办法,在结合marker和自定义覆盖物的情况下可以实现这样的效果。实现思路:首先生成marker,然后设置...

    网上找了好多方法还没有找到合适的,因为百度地图marker上所展现的数字其实是用背景图来实现,所以想了个比较笨的办法,在结合marker和自定义覆盖物的情况下可以实现这样的效果。

    实现思路:首先生成marker,然后设置marker的背景图为红色或者绿色( 设置BMap.Icon),然后再添加自定义覆盖物也就是我们所需要的数字

    然后再是把自定义覆盖物直接做成span标签,然后添加。

    代码如下

    <!DOCTYPE html>

    <html>

    <head>

            <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>map</title>

            <!-- jquery -->

        <script type="text/javascript" src="js/jquery/jquery.1.9.1.js"></script>

        <!-- user -->

        <link rel="stylesheet" type="text/css" href="css/style.min.css">

        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=替换成自己的秘钥"></script>

    </head>

    <body>

    <div style="width:100%;height:780px"></div>

    </body>

    <script>

        var map = new BMap.Map("container", { enableMapClick: true});

        map.centerAndZoom(new BMap.Point(120.213634,30.24583), 15   );  // 初始化地图,设置中心点坐标和地图级别

        map.setCurrentCity("杭州");          // 设置地图显示的城市 此项是必须设置的

        map.enableScrollWheelZoom(true);

     

        // ************************************自定义覆盖物**************************************************************

          // 覆盖物构造方法

        function ComplexCustomOverlay(point,index){

            this._point = point;

            this._index=index;

        }

        ComplexCustomOverlay.prototype = new BMap.Overlay();

        ComplexCustomOverlay.prototype.initialize = function(map){

            this._map = map;

            var span=this._span=document.createElement("span");

      //这里用jquery设置样式

            $(span).css({   

                'position':'absolute',

                'zIndex':BMap.Overlay.getZIndex(this._point.lat),

                'display':'block',

                'width':'26px',

                'color':'#FFF',

                'text-align':'center',

                'point-events':'none'});

      //设置数字也就是我们的标注

            this._span.innerHTML=this._index;

            map.getPanes().labelPane.appendChild(span);

     

            return span;

        }

     

        ComplexCustomOverlay.prototype.draw = function(){

            var map = this._map;

            var pixel = map.pointToOverlayPixel(this._point);

      //设置自定义覆盖物span 与marker的位置

            this._span.style.left = pixel.x - 12+'px';

            this._span.style.top  = pixel.y -14+'px';

      }

      

     

    // *******************************添加点******************************

        // 添加点

        function addMarker(point,type){

            // 设置不同点的背景图(红色和绿色两个图片)

     

            if(type=='red'){

                var myIcon=new BMap.Icon('img/position01.png',new BMap.Size(23,35));

            }else{

                var myIcon=new BMap.Icon('img/position02.png',new BMap.Size(23,35));

            }

            var marker = new BMap.Marker(point);

            marker.setIcon(myIcon);

            map.addOverlay(marker);

            

        }

       // 随机向地图添加25个标注

        var bounds = map.getBounds();

        var sw = bounds.getSouthWest();

        var ne = bounds.getNorthEast();

        var lngSpan = Math.abs(sw.lng - ne.lng);

        var latSpan = Math.abs(ne.lat - sw.lat);

        for (var i = 0; i < 25; i ++) {

            var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));

            // 设置不同点的类型(红或者绿)

            if(i%2==0){

                addMarker(point,'red');

            }else{

                addMarker(point,'green');

            }

            var myCompOverlay = new ComplexCustomOverlay(point,i);

            map.addOverlay(myCompOverlay);  

        } 

    </script>

    </html>

     

    效果图如下

    虽然是比较直接的办法,但是最终效果还是实现了 

    展开全文
  • 百度地图版本不同,里面的函数有些区别,我用的是 <...ak=秘钥"></script> 这个版本创建百度地图需要用 map = new BMapGL.Map(“allmap”);...所以我现在的标注图标是服务器取出来的一张图片,而不是sv.

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

    百度地图接口版本不同,里面的函数有些区别,我用的是

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

    这个版本创建百度地图需要用
    map = new BMapGL.Map(“allmap”);

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

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

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

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

    • 百度地图添加多个标注图标定位点
    • 百度地图给多个标注添加监听(左击和右击标注监听)
    • 百度地图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"
    	}
    } ]
    
    展开全文
  • overlay 实现 label标注信息4 overlay 实现 text文本信息5. 附上完整代码 1. 写在前面 常见的地图覆盖物为这三种类型,如:popup弹窗、label标注信息、text文本信息等。 上篇讲了overlay的一些属性方法事件等,这篇...
  • 当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动、缩放 的时候,Marker 的Label 就会自动消失。 这个问题主要是由于百度的点聚合API<script type="text/javascript" src=...
  • 地图的标注Marker

    2018-02-06 22:25:00
    (1)在point处添加标注:var marker = new BMap.Marker(point); (2)添加覆盖物:map.addOverlay(marker); (3)激活标注的拖拽功能:marker.enableDragging(); (4)为标注添加事件:marker.addEventListener("名称...
  • c#GMap标注marker移动.zip

    2019-07-31 17:11:59
    c#Gmap marker移动标注 亲测有效 marker随鼠标移动
  • 百度地图添加多个marker点位标注

    千次阅读 2020-07-21 11:44:21
    百度地图添加多个marker点位标注 <template> <div class="overview"> <div class="container" ref="container" id="container"></div> <div class="search"> <left-tree @...
  • 百度地图标注api在地图上选择地址后获取地址和坐标,在marker标注上添加注释在百度地图容器中创建一个地图将地址解析结果显示在地图上,并调整地图视野/启用地图拖拽事件,默认启用(可不写)启用地图滚轮放大缩小启用...
  • vue项目,百度地图自定义标注marker

    千次阅读 2020-11-09 16:16:45
    vue项目,百度地图自定义标注marker 1、向地图中添加标注 如下示例,向地图中心点添加了一个标注,并使用默认的标注样式: var point = new BMapGL.Point(116.404, 39.915); var marker = new BMapGL.Marker(point)...
  • <div><p>ngx-amap version: 2.2.1 <p><code>this.icon = this.icon ? null : { size: { width: 40, height: 50, }, image: '..., imageOffset: { x: 0, ...xieziyu/ngx-amap</p></div>
  • 网上搜索了一下,发现没能...在点击事件里调用marker的getLabel方法,判断marker有没有Label,第一次点击的时候,控制台打印的是null,这个时候需要生成一个Label放到marker上。接着点击marker判断,此时Label不是nu...
  • 高德地图开发之点标注marker

    万次阅读 2017-08-25 14:46:28
    在地图上添加点标记是常使用的方法,用它可以将任何你希望或感兴趣的点标注在地图上,同时也可以指定任意的图标或内容等。Marker就是这样一个用于在地图上添加点标记的类。
  • new AMap.Marker({ // icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", // icon: 'img/icon/'+item.mark, icon:new AMap.Icon({ image: 'img/icon/'+item.mark, ...
  • 点聚合功能自v3.6.0版本起,新增点聚合功能,可通过缩小地图层级,将定义范围内的多个标注点,聚合显示成一个标注点,并在MarkerClusterDemo中开放源码,方便开发者自行修改。 // 初始化点聚合管理类Cluster...
  • 百度地图创建marker坐标,添加自定义标注: //首先要引入百度api &lt;script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp; ak=你的密钥&amp;s=1"&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 502
精华内容 200
关键字:

marker标注