百度地图marker标注上如何加上数字

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

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

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

代码如下

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

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");

　　//设置样式

$(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>

效果图如下

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

转载于:https://www.cnblogs.com/nouveau/p/7490257.html

百度地图marker标注上如何加上数字相关推荐

android百度地图覆盖物异步加载图片,Android 百度地图marker中图片不显示的解决方法(推荐)...
目的: 根据提供的多个经纬度,显示所在地的marker样式,如下: 问题: 1.发现marker中在线加载的图片无法显示出来: 2.获取多个对象后,却只显示出了一个marker: 以下为官网实现方法: ...
基于JDBC从数据库中读取数据，在百度地图批量标注地点
基于JDBC从数据库中读取数据,在百度地图批量标注地点一.相关技术 JSP,JDBC,JSON,JS,百度地图API 二.基于JDBC从数据库读取数据见"JSP基于JDBC操作MSSQL ...
百度地图自定义标注样式
实现效果图标注样式的自定义 // 百度地图marker样式 let icon1 = new BMap.Icon(require('../src/assets/nationMap/marker1.pn ...
百度地图多标注显示以及自定义图标
** 百度地图多标注显示以及自定义图标 ** 效果图: HTML部分 <style>*{margin:0px;padding:0px} html{font-size: 100%;} bod ...
百度地图自定义标注点
百度地图自定义标注点 //创建点 var point = new BMap.Point(109.49926175379778, 36.60449676862417); //创建自定义标 //参数1:自 ...
百度地图，标注不在中心位置问题
百度地图,标注不在中心位置问题今天用百度地图,做一个效果根据后台传输过来的位置坐标,显示并标注.不知道为什么百度地图老是偏离标注位置一个屏幕. 这是点击查看位置时的效果如图: 这个和我想的跑偏了十 ...
百度地图 php,php+js实现百度地图多点标注的方法
本文实例讲述了php+js实现百度地图多点标注的方法.分享给大家供大家参考,具体如下: 1.php创建json数据 $products = $this->product_db->selec ...
移动端百度地图多点标注php,PHP学习：php+js实现百度地图多点标注的方法
<PHP学习:php+js实现百度地图多点标注的方法>要点: 本文介绍了PHP学习:php+js实现百度地图多点标注的方法,希望对您有用.如果有疑问,可以联系我们. PHP教程 PHP教程 ...
地图标注源码 php,jQuery百度地图自定义标注信息代码
jQuery百度地图自定义标注信息代码是一款简单实用的百度地图api标注联系地址名称电话等信息代码. new BaiduMap({ id: "container2", title: ...

百度地图marker标注上如何加上数字

百度地图marker标注上如何加上数字相关推荐

最新文章

热门文章