百度地图api自定义覆盖物

标签: 百度地图  自定义覆盖物

// 定义构造函数并继承Overlay
function CustomOverlay(center, img, name, text){
    this._center = center;
    this._img = img;
    this._name = name;
    this._text = text;
}

// 继承API BMap.Overlay
CustomOverlay.prototype = new BMap.Overlay();

// 初始化自定义覆盖物
CustomOverlay.prototype.initialize = function (map) {
    // 保存map对象实例
    this._map = map;
    // 创建div元素,作为自定义覆盖物的容器
    var div = document.createElement("div");
    div.style.position = 'absolute';
    // 根据参数设置元素外观
    div.style.background = "url(" + this._img + ") no-repeat 0 -18px";
    div.style.MozUserSelect = 'none';

    var oneDiv = document.createElement("div");
    $(oneDiv).css({
        "height":"30",
        "width":"18",
        "white-space": "nowrap",
        "color":"#fff",
        "text-align":"center",
        "line-height":"30px"
    });
    $(div).append('<div class="detail" style="display:none; position:absolute;padding:10px; left:25px; background:#fff;">' +
        '<div style="width:258px;height: 20px;"><span style="float: left;">名称:</span><span style="float: left;">' + this._name +
        '</span></div><div style="width: 258px;height: 20px;"><span style="float:left;">备注:</span><span style="float:left;">'+ this._text +'</span></div></div>');
    div.appendChild(oneDiv);
    $(div).mousemove(function(){
        $(this).css("z-index","999999");
        $(this).children(".detail").css("display","block");
    });
    $(div).mouseout(function(){
        $(this).children(".detail").css("display","none");
    });

    // 将div添加到覆盖物容器中
    map.getPanes().markerPane.appendChild(div);
    // 保存div实例
    this._div = div;
    // 需要将div元素作为方法的返回值,当调用该覆盖物的show、
    // hide方法,或者对覆盖物进行移除时,API都将操作此元素
    return div;
}

// 绘制覆盖物
CustomOverlay.prototype.draw = function () {
    // 根据地理坐标转换为像素坐标,并设置给容器
    var position = this._map.pointToOverlayPixel(this._center);
    this._div.style.left = position.x - 10 + 'px';
    this._div.style.top = position.y - 10 + 'px';
}

// 实现显示方法
CustomOverlay.prototype.show = function () {
  if(this._div){
      this._div.style.display = '';
  }
}

// 实现隐藏方法
CustomOverlay.prototype.hide = function () {
  if(this._div){
      this._div.style.display = 'none';
  }
}


在百度地图上,创建自定义覆盖物,鼠标经过时显示详情

关键代码:

function buildBaiduMap(result) {
    // 创建Map实例
    // 构造地图时,关闭地图可点功能
    var map = new BMap.Map("allmap", {
        enableMapClick: false
    });
    var pointArray = [];
    for (var i = 0; i < result.length; i++) {
        var one = result[i];
        var longitude = one['longitude'];
        var latitude = one['latitude'];
        var name = one['name'];
        var remark = one['remark'];
        var point = new BMap.Point(longitude, latitude);
        var marker = new CustomOverlay(point, 'images/cursor.png', name, remark);
        pointArray.push(point);
        map.addOverlay(marker);
    }
    //让所有点在视野范围内
    map.setViewport(pointArray);
}


效果展示:


result数据格式形如:

[{"longitude":"120.489327","latitude":"31.501122","name":"**社区**栋","remark":"测试楼栋1"},{"longitude":"120.489839","latitude":"31.502023","name":"**社区**栋","remark":"测试楼栋2"},{"longitude":"120.490629","latitude":"31.502323","name":"**一社区**栋","remark":"测试楼栋3"}]

版权声明:本文为u010784959原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u010784959/article/details/79298759

智能推荐

JS版]基于百度地图的 Overlay 扩展,仿Q房网实现自定义覆盖物

[JS版]基于百度地图的 Overlay 扩展,仿Q房网实现自定义覆盖物 经常看到各大找房系统平台上,有类似这样的功能: 地图上显示当前城市的区,鼠标悬停上去,显示这个区的不规则的范围覆盖物。点击这个地区热点,显示这个地区下的详细 热点。 最近做项目也需要用到类似效果,找不到合适的,自己动手撸了一个,有需要的朋友可以做下参考。 老规则,先上效果图: 点击区域后显示: 大概说下实现思路: 主要使用到...

如何在vue中使用百度地图添加自定义覆盖物(水波纹)动画效果

具体的应用场景简而言之就是需要我们在地图上添加如图中所示的自定义覆盖物。实现的过程作者分为以下两点给大家介绍介绍。 水波紋的实现 自定义覆盖物的实现 水波紋的实现 这个需求的实现肯定是离不开我们自己写自定义覆盖物的,那么首先我们来讨论一下水波纹动画的实现。 首先我们可以看到图中的覆盖物是由一个红心和水波紋组成,其中红心是固定不动的,那么我们可以直接这么写: 这样子我们首先就实现了红心部分的样式。那...

百度地图API之覆盖物和事件

前言 之前已经介绍了如何添加地图上一些控件,添加一些控件后就会实现一些常用的功能。具体请参考上一篇博文。下面主要介绍如何添加覆盖物及给地图、地标等添加响应事件。 覆盖物相关API介绍 地图覆盖物概述 所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、矢量图形元素(包括:折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。  地图API...

百度地图的覆盖物自定义(二)--信息窗口的自定义(调用白茹提供的信息窗口InfoWindow)

百度地图的覆盖物自定义(而)--信息窗口的自定义(调用白茹提供的信息窗口InfoWindow)...

猜你喜欢

css3画圆和椭圆

试一下就知道怎么用了,  画个多来A梦 是用多简单...

raw&assets&sdcard读取mp3文件的方式

Raw方式 assets SDcard 首先需要添加 静态请求权限 动态请求 playMnt的播放方法 如何在模拟器中添加音乐 详细代码参见 点击跳转...

微信小程序封装请求方法wx.request(OBJECT)

小程序写完也一段时间了,最近分享下装逼的技能吧,封装请求方法,不但高大上,而且使用简单。先说说小程序自带的请求吧! wx.request(OBJECT) 参数: 参数名 类型 必填 默认值 说明 url String 是 开发者服务器接口地址 data Object/String/ArrayBuffer 否 请求的参数 header Object 否 设置请求的 header,header 中不能...

【并行计算-CUDA开发】【视频开发】ffmpeg Nvidia硬件加速总结

2017年5月25日 0. 概述 FFmpeg可通过Nvidia的GPU进行加速,其中高层接口是通过Video Codec SDK来实现GPU资源的调用。Video Codec SDK包含完整的的高性能工具、源码及文档,支持,可以运行在Windows和Linux系统之上。从软件上来说,SDK包含两类硬件加速接口,用于编码加速的NVENCODE API和用于解码加速的NVDECODE API(之前被...

HTML简介及部分常用标签

一、HTML简介 1)HTML简介 HTML是⽤于创建⽹⻚的语⾔。我们通过使⽤HTML标记标签创建html⽂档来创建⽹⻚。 HTML代表超⽂ 本标记语⾔。 HTML是⼀种标记语⾔,它具有标记标签的集合。 HTML标签是由尖括号括起来的词,如 , 。标签通常成对出现,例如 和 。 ⼀对中的第⼀个标签是开始标签;第⼆个标签是结束标签。在上⾯的示例中, 是开始标签,⽽ 是结束标签。 我们还可以将开始标签...