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

简介: 原文:【百度地图API】你看过房产地图吗?你知道房产标注是如何建立的吗?你是不是看过很多房产网站?例如安居客,新浪乐居。 你是不是也想做一个能写文字的标注? 你知道怎么去实现麼? 其实,上图这样的标注是一个“自定义覆盖物”。
原文: 【百度地图API】你看过房产地图吗?你知道房产标注是如何建立的吗?

你是不是看过很多房产网站?例如安居客,新浪乐居。
你是不是也想做一个能写文字的标注?
你知道怎么去实现麼?
img_2d5b01dcd33d972416b6b9ca84fd6d0e.jpg
其实,上图这样的标注是一个“自定义覆盖物”。你可以任意指定它的样式,文字,图片等等。
首先,我需要初始化地图:
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(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 " ;
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);
运行示例,请点击:
目录
相关文章
|
2月前
|
缓存 API 定位技术
使用Python调用百度地图API实现地址查询
使用Python调用百度地图API实现地址查询
121 0
|
2月前
|
自然语言处理 API 语音技术
Python加百度语音API实现文字转语音功能
Python加百度语音API实现文字转语音功能
63 0
|
4月前
|
JSON JavaScript 定位技术
Vue中使用echarts@4.x中国地图及AMap相关API的使用
Vue中使用echarts@4.x中国地图及AMap相关API的使用
188 0
Vue中使用echarts@4.x中国地图及AMap相关API的使用
|
5月前
|
SQL 存储 DataWorks
DataWorks中API、desc、数据地图,这3个怎么对起来?
DataWorks中API、desc、数据地图,这3个怎么对起来?
41 0
|
5月前
|
定位技术 API
百度地图API的使用教程以及案例(二)
百度地图API的使用教程以及案例
|
2天前
|
安全 API 开发者
智能体-Agent能力升级!新增Assistant API & Tools API服务接口
ModelScope-Agent是一个交互式创作空间,它支持LLM(Language Model)的扩展能力,例如工具调用(function calling)和知识检索(knowledge retrieval)。它已经对相关接口进行了开源,以提供更原子化的应用LLM能力。用户可以通过Modelscope-Agent上的不同代理(agent),结合自定义的LLM配置和消息,调用这些能力。
|
6天前
|
JSON 搜索推荐 数据挖掘
电商数据分析的利器:电商关键词搜索API接口(标题丨图片丨价格丨链接)
淘宝关键词搜索接口为电商领域的数据分析提供了丰富的数据源。通过有效利用这一接口,企业和研究人员可以更深入地洞察市场动态,优化营销策略,并提升用户体验。随着电商平台技术的不断进步,未来的API将更加智能和个性化,为电商行业带来更多的可能性。
|
13天前
|
存储 缓存 运维
DataWorks操作报错合集之DataWorks根据api,调用查询文件列表接口报错如何解决
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
23 1
|
14天前
|
SQL 数据管理 API
数据管理DMS产品使用合集之阿里云DMS提供API接口来进行数据导出功能吗
阿里云数据管理DMS提供了全面的数据管理、数据库运维、数据安全、数据迁移与同步等功能,助力企业高效、安全地进行数据库管理和运维工作。以下是DMS产品使用合集的详细介绍。