根据百度地图的缩放级别,如大于15的时候,显示蓝色小船图标下的船名,如下图所示:
如过缩放级别小于15,船名消失,只显示蓝色图标;
<!--百度地图js代码-->
<script type="text/javascript">
// 定义一个有返回值的ajax函数供调用
function ajaxCustom(url, data, method, async) {
var result = null;
$.ajax({
url : url,
data : data,
type : method,
async : async,
contentType : "application/x-www-form-urlencoded; charset=UTF-8",
success : function(responseText) {
result = responseText;
},
error : function(msg) {
console.log(msg);
},
complete : function(XHR, TS) {
XHR = null;
}
});
return result;
}
$(function(){
shipList('');
});
var map = new BMap.Map("map_wrapper");
var point = new BMap.Point(118.3677390000, 31.3325560000);
function myFun(result){
var cityName = result.name;
map.setCenter(cityName);
}
map.centerAndZoom(point,12); // 编写自定义函数,创建标注
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
map.enableKeyboard();//启动键盘操作地图
// 定义自定义覆盖物的构造函数
function SquareOverlay(center, length){
this._center = center;
this._length = length;
}
// 继承API的BMap.Overlay
SquareOverlay.prototype = new BMap.Overlay();
// 实现初始化方法
SquareOverlay.prototype.initialize = function(map){
// 保存map对象实例
this._map = map;
// 外层容器
var shipMainWrapper = document.createElement("div");
shipMainWrapper.style.height = (this._length + 20) + "px";
shipMainWrapper.style.width = (this._length + 20) + "px";
shipMainWrapper.style.textAlign = "center";
shipMainWrapper.style.position = "absolute";
shipMainWrapper.id = this._center.ship_id;
//船舶图片容器
var shipImgWrapper = document.createElement("div");
var shipImg = document.createElement("img");
shipImg.src = "../resource/web/images/home/kong.png";
if (this._center.isEmpty == "1"){
shipImg.src = "../resource/web/images/home/man.png";
}
shipImgWrapper.appendChild(shipImg);
//船舶名
var shipName = document.createElement("div");
shipName.innerText = this._center.shipName;
//组装
shipMainWrapper.appendChild(shipImgWrapper);
shipMainWrapper.appendChild(shipName);
// 将div添加到覆盖物容器中
map.getPanes().markerPane.appendChild(shipMainWrapper);
// 保存div实例
this._div = shipMainWrapper;
// 需要将div元素作为方法的返回值,当调用该覆盖物的show、
// hide方法,或者对覆盖物进行移除时,API都将操作此元素。
return shipMainWrapper;
}
// 实现绘制方法
SquareOverlay.prototype.draw = function(){
// 根据地理坐标转换为像素坐标,并设置给容器
var position = this._map.pointToOverlayPixel(this._center);
this._div.style.left = position.x - this._length / 2 + "px";
this._div.style.top = position.y - this._length / 2 + "px";
}
// 实现显示方法
SquareOverlay.prototype.show = function(){
if (this._div){
this._div.style.display = "";
}
}
// 实现隐藏方法
SquareOverlay.prototype.hide = function(){
if (this._div){
this._div.style.display = "none";
}
}
</script>