百度地图自定义覆盖物

    <script>
    var map = new BMap.Map(‘allmap‘);
    var Bcenter = new BMap.Point(116.404,39.915);
    map.centerAndZoom(Bcenter,11);

    //自定义的覆盖物
    function myOverlay(point,text,mouseoverText){
        this._point = point;
        this._text = text;
        this._overtext = mouseoverText;
    }

    //继承overlay的API
    myOverlay.prototype = new BMap.Overlay();

    //初始化自定义覆盖物
    myOverlay.prototype.initialize = function(map){
        this._map = map;
        //创建div标签
        var div = this._div = document.createElement(‘div‘);
        div.style.position = ‘absolute‘;
        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
        div.style.backgroundColor = ‘#EE5D5B‘;
        div.style.border = ‘1px solid #BC3B3A‘;
        div.style.color = ‘white‘;
        div.style.height = ‘18px‘;
        div.style.padding = ‘2px‘;
        div.style.lineHeight = ‘18px‘;
        div.style.whiteSpace = ‘nowrap‘;
        div.style.MozUserSelect = ‘none‘;
        div.style.fontSize = ‘12px‘;
        //创建span标签
        var span = this._span = document.createElement(‘span‘);
        div.appendChild(span);
        span.appendChild(document.createTextNode(this._text));
        var that = this;

        //箭头的穿件
        var arrow = this._arrow = document.createElement(‘div‘);
        arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
        arrow.style.position = "absolute";
        arrow.style.width = "11px";
        arrow.style.height = "10px";
        arrow.style.top = "22px";
        arrow.style.left = "10px";
        arrow.style.overflow = "hidden";
        div.appendChild(arrow);
        //标签绑定事件
    /*div.onmouseover = function(){
            this.style.backgroundColor = "#6BADCA";
            this.style.borderColor = "#0000ff";
            this.getElementsByTagName("span")[0].innerHTML = that._overtext;
            arrow.style.backgroundPosition = "0px -20px";
        }

        div.onmouseout = function(){
            this.style.backgroundColor = "#EE5D5B";
            this.style.borderColor = "#BC3B3A";
            this.getElementsByTagName("span")[0].innerHTML = that._text;
            arrow.style.backgroundPosition = "0px 0px";
        }
        */
        //添加到覆盖物的容器中
        map.getPanes().labelPane.appendChild(div);
        return div;
    }

    //绘制覆盖物
    myOverlay.prototype.draw = function(){
        var map = this._map;
        var pixel = map.pointToOverlayPixel(this._point);
        this._div.style.left = pixel.x - parseInt(this._arrow.left) + ‘px‘;
        this._div.style.top = pixel.y - 30 + ‘px‘;
    }

    //覆盖物显示
    myOverlay.prototype.show = function(){
        if(this._div){
            this._div.style.display = ‘‘;

        }
    }

    //隐藏覆盖物
    myOverlay.prototype.hide = function(){
        if(this._div){
            this._div.style.display = ‘none‘;
        }
    }

    //自定义覆盖物添加事件
    myOverlay.prototype.addEventListener = function (event, fun) {
        this._div[‘on‘ + event] = fun;

    }

    var myoverlay = new myOverlay(Bcenter,‘鼠标上来看看‘,‘鼠标下去看看‘);
    map.addOverlay(myoverlay);
    myoverlay.addEventListener(‘click‘,function(){
        alert(‘注册点击事件‘);
    })
    </script>

时间: 2024-08-29 17:30:23

百度地图自定义覆盖物的相关文章

百度地图添加覆盖物与给定两点路线规划

final LatLng ll = new LatLng(latiide, longitude);                BitmapDescriptor descriptor = BitmapDescriptorFactory                        .fromResource(marker);                OverlayOptions options = new MarkerOptions().position(ll).icon(      

百度地图 自定义结果面板+分页+图层标注(标注点+搜索)

示例一: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/java

IOS 设置百度地图自定义标注图片,自定义泡泡

#pragma mark - BMKMapViewDelegate // 根据anntation生成对应的View - (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id <BMKAnnotation>)annotation { //普通annotation NSString *AnnotationViewID = @"ClusterMark"; ClusterAnnotation

百度地图添加覆盖物

按照官方的demo部署好以后.添加一个覆盖物. 需要的类: BitmapDescriptor  bitmap 图像对象  用于显示到覆盖物的地方. MapView  主要对象   有 页面上的控件实例化. BaiduMap  有mapView.getMap() ;  地图对象.可以添加各种东西到地图上. MapStatusUpdate  描述地图状态将要发生的变化. LatLng 地理坐标基本数据结构 直接由纬经度实例化. OverlayOptions  覆盖物配置对象.可以将覆盖物的图标,地理

百度地图 自定义可编辑的交通路线

任务描述: 我想自己绘制一条从地铁站出口到天安门的道路,而且还需要根据我的喜好来改变这条路线. 如何实现: 鼠标左击地图,绘制路线:双击后,绘制结束:绘制结束后,路线可编辑. TIPS: API1.1以后,可以使用enableEditing()来开启折线可编辑功能. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha

android百度地图 添加覆盖物Marker与InfoWindow的使用

如何添加覆盖物,实现周边搜索,以及对覆盖物的点击出现介绍等效果. 效果图: 我们的需求是,当用户点击衣食住行,或者对对附近搜索是,从服务器返回数据(经纬度,商家信息,介绍等),然后动态生成覆盖物,实现上述效果.关于图片,由于手机上的内存的有限性,所有的图片下载完成都应该存入预设的缓存中,例如LruCache,然后需要的时候从缓存取,缓存没有,下载完成放入缓存:即实现所有的图片所占的内存永远不会超过缓存预设的内存值,当然了本篇的重点不是这个,我直接拿了几张图片加入我们的项目中模拟. 1.承载数据的

03.(最新版)百度地图&#167;覆盖物OverlayOptions

转载请标明:http://blog.csdn.net/u012637501 目前百度地图SDK所提供的地图等级为3-19级,所包含的信息有建筑物.道路.河流.学校.公园等内容.所有叠加或覆盖到地图的内容,我们统称为地图覆盖物.如标注.矢量图形元素(包括:折线.多边形和圆等).定位图标等.覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动.我们可根据自己实际的业务需求,利用标注覆盖物,在地图指定的位置上添加标注信息. 一.APIs 1.LatLng类 (1)作用:地理坐标基本数据结构

百度地图API自定义地图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

百度地图覆盖物多边形拖动,点击,生成新的覆盖物

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">