长沙好房子网地图 (长沙好房子网站)
css
/ 样式 // 地图容器 /
map {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}/ 缩放控制 /
scale-control {position: absolute;top: 10px;
left: 10px;width: 100px;height: 60px;background-color: fff;border: 1px solid ccc;
}/ 缩放控制按钮 /
scale-control button {display: block;width: 50px;height: 30px;line-height: 30px;text-align: center;background-color: ccc;border: 1px solid ccc;
}/ 缩放控制按钮 hover效果 /
scale-control button:hover {background-color: ddd;
}
js
/ 地图脚本 /// 地图初始化
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(113.01, 28.22), 12);// 缩放控件
var scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(scaleControl);//标注点数据
var points = [{name: "麓谷科技园",point: new BMap.Point(113.05, 28.18),click: function() {alert("您点击了麓谷科技园");}},{name: "洋湖湿地公园",point: new BMap.Point(112.98, 28.23),click: function() {alert("您点击了洋湖湿地公园");}},{name: "万达广场",point: new BMap.Point(112.95, 28.28),click: function() {alert("您点击了万达广场");}}
];// 创建标注点
for (var i = 0; i < points.length; i++) {var point = points[i];var marker = new BMap.Marker(point.point);marker.setTitle(point.name);marker.addEventListener("click", point.click);map.addOverlay(marker);
}
版权声明
本文仅代表作者观点，不代表长沙桑拿立场。
本文系作者授权发表，未经许可，不得转载。
