【百度地图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);
运行示例,请点击:
目录
相关文章
|
6月前
|
新能源 API
百科-百度免费API接口教程
该接口用于从百度百科获取指定名词的基础解释。支持POST或GET请求,需提供用户ID、用户KEY及查询内容。返回状态码和解释内容或错误提示。示例:https://cn.apihz.cn/api/zici/baikebaidu.php?id=88888888&key=88888888&words=汽车。建议使用个人ID与KEY以享受更高调用频次。
|
6月前
|
API
表情包-百度版免费API接口教程
该接口用于通过指定关键词从百度渠道获取表情包,支持POST或GET请求。需提供用户ID和KEY,可选参数包括关键词、页码及结果数量。返回数据包含状态码、信息提示、结果集等。示例中ID与KEY为公共测试用,建议使用个人ID与KEY以享受更高调用频率。
|
6月前
|
API
通用图片搜索-百度源免费API接口教程
该接口用于搜索百度图片,支持通过关键词、页码、结果数量等参数获取图片搜索结果。请求方式为POST或GET,需提供用户ID和KEY,可选参数包括关键词、页码、结果数量及返回源类型。返回结果包含状态码、信息提示、结果集、当前页码、最大页码和结果数量。示例中提供了GET和POST请求方法及返回数据示例。
|
9月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
116 0
|
10月前
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
472 0
|
11月前
|
域名解析 JavaScript 网络协议
技术心得记录:如何使用google地图的api(整理)
技术心得记录:如何使用google地图的api(整理)
831 0
|
API 定位技术 Android开发
百度地图移动版API 1.2.2版本(Android)地图偏移的最佳解决办法
Import import com.baidu.mapapi.CoordinateConvert;import com.baidu.mapapi.GeoPoint; Code GeoPoint p = new GeoPoint(x, y);GeoPoint p2 = CoordinateConvert.
728 0
|
1月前
|
JSON 数据挖掘 API
1688API最新指南:商品详情接口接入与应用
本指南介绍1688商品详情接口的接入与应用,该接口可获取商品标题、价格、规格、库存等详细信息,适用于电商平台开发、数据分析等场景。接口通过商品唯一标识查询,支持HTTP GET/POST请求,返回JSON格式数据,助力开发者高效利用1688海量商品资源。
|
1月前
|
JSON 数据挖掘 API
京东API接口最新指南:店铺所有商品接口的接入与使用
本文介绍京东店铺商品数据接口的应用与功能。通过该接口,商家可自动化获取店铺内所有商品的详细信息,包括基本信息、销售数据及库存状态等,为营销策略制定提供数据支持。此接口采用HTTP请求(GET/POST),需携带店铺ID和授权令牌等参数,返回JSON格式数据,便于解析处理。这对于电商运营、数据分析及竞品研究具有重要价值。
|
2月前
|
存储 供应链 监控
1688商品数据实战:API搜索接口开发与供应链分析应用
本文详细介绍了如何通过1688开放API实现商品数据的获取与应用,涵盖接入准备、签名流程、数据解析存储及商业化场景。开发者可完成智能选品、价格监控和供应商评级等功能,同时提供代码示例与问题解决方案,确保法律合规与数据安全。适合企业开发者快速构建供应链管理系统。