当前位置:首页 > 网页设计 >Javascript >

【百度地图API】你看过房产地图吗?你知道房产标注是如何建立的吗?

发布时间:2016-07-01 13:21:31 作者:佚名 阅读:(1026)

你是不是看过很多房产网站?例如安居客,新浪乐居。
你是不是也想做一个能写文字的标注?
你知道怎么去实现麼?
其实,上图这样的标注是一个“自定义覆盖物”。你可以任意指定它的样式,文字,图片等等。
首先,我需要初始化地图:
	var mp = new BMap.Map("map_container");

	var point = new BMap.Point(116.3964,39.9093);

	mp.centerAndZoom(point,15); 
	
然后,建立两个自定义覆盖物:
	var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845,39.914101), "天安门东");

	var myCompOverlay2 = new ComplexCustomOverlay(new BMap.Point(116.406946,39.911403), "国家博物馆");
	
对自定义覆盖物定义:(包括样式、图片、位置偏移等等)
	// 复杂的自定义覆盖物

	    function ComplexCustomOverlay(point, text){

	      this._point = point;

	      this._text = text;

	    }

	    ComplexCustomOverlay.prototype = new BMap.Overlay();

	    ComplexCustomOverlay.prototype.initialize = function(map){

	      this._map = map;

	      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"

	      div.appendChild(document.createTextNode(this._text));


	      var arrow = this._arrow = document.createElement("div");

	      arrow.style.background = "url('图片地址') 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";

	        arrow.style.backgroundPosition = "0px -20px";

	      }


	      div.onmouseout = function(){

	        this.style.backgroundColor = "#EE5D5B";

	        this.style.borderColor = "#BC3B3A";

	        arrow.style.backgroundPosition = "0px 0px";

	      }


	      mp.getPanes().labelPane.appendChild(div);

	      return div;

	}

	    ComplexCustomOverlay.prototype.draw = function(){

	      var map = this._map;

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

	      this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";

	      this._div.style.top  = pixel.y - 30 + "px";

	    }

最后,在地图上把它们添加上来。
    mp.addOverlay(myCompOverlay);

    mp.addOverlay(myCompOverlay2);

欢迎分享转载→ 【百度地图API】你看过房产地图吗?你知道房产标注是如何建立的吗?

© 2015-2019 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们