【百度地图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);
运行示例,请点击:
目录
相关文章
|
3月前
|
缓存 数据可视化 定位技术
快递鸟快递API技术指南:获取物流轨迹信息与轨迹地图的解决方案
在当今电商竞争激烈的环境中,物流体验已成为提升用户满意度的关键因素。研究表明,超过 75% 的消费者会因物流信息不透明而放弃下单。
697 1
|
新能源 API
百科-百度免费API接口教程
该接口用于从百度百科获取指定名词的基础解释。支持POST或GET请求,需提供用户ID、用户KEY及查询内容。返回状态码和解释内容或错误提示。示例:https://cn.apihz.cn/api/zici/baikebaidu.php?id=88888888&key=88888888&words=汽车。建议使用个人ID与KEY以享受更高调用频次。
1587 4
|
API
表情包-百度版免费API接口教程
该接口用于通过指定关键词从百度渠道获取表情包,支持POST或GET请求。需提供用户ID和KEY,可选参数包括关键词、页码及结果数量。返回数据包含状态码、信息提示、结果集等。示例中ID与KEY为公共测试用,建议使用个人ID与KEY以享受更高调用频率。
1528 4
|
API
通用图片搜索-百度源免费API接口教程
该接口用于搜索百度图片,支持通过关键词、页码、结果数量等参数获取图片搜索结果。请求方式为POST或GET,需提供用户ID和KEY,可选参数包括关键词、页码、结果数量及返回源类型。返回结果包含状态码、信息提示、结果集、当前页码、最大页码和结果数量。示例中提供了GET和POST请求方法及返回数据示例。
1833 4
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
226 0
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
1023 0
|
Web App开发 JavaScript 测试技术
【百度地图API】多家地图API内存消耗对比测验(带源码)
原文:【百度地图API】多家地图API内存消耗对比测验(带源码) 任务描述: 啊,美妙的春节结束了。酸奶小妹和妈妈的山西平遥之旅也宣告成功!距离平遥古城7km,有一个同样身为“世界文化遗产”的寺庙,叫做“双林寺”。
1055 0
|
3月前
|
缓存 监控 前端开发
顺企网 API 开发实战:搜索 / 详情接口从 0 到 1 落地(附 Elasticsearch 优化 + 错误速查)
企业API开发常陷参数、缓存、错误处理三大坑?本指南拆解顺企网双接口全流程,涵盖搜索优化、签名验证、限流应对,附可复用代码与错误速查表,助你2小时高效搞定开发,提升响应速度与稳定性。
|
3月前
|
JSON 算法 API
Python采集淘宝商品评论API接口及JSON数据返回全程指南
Python采集淘宝商品评论API接口及JSON数据返回全程指南
|
4月前
|
数据可视化 测试技术 API
从接口性能到稳定性:这些API调试工具,让你的开发过程事半功倍
在软件开发中,接口调试与测试对接口性能、稳定性、准确性及团队协作至关重要。随着开发节奏加快,传统方式已难满足需求,专业API工具成为首选。本文介绍了Apifox、Postman、YApi、SoapUI、JMeter、Swagger等主流工具,对比其功能与适用场景,并推荐Apifox作为集成度高、支持中文、可视化强的一体化解决方案,助力提升API开发与测试效率。