百度地图怎么给自定义覆盖物添加属性

一、定义构造函数并继承Overlay

// 定义自定义覆盖物的构造函数

function SquareOverlay(center, length, color){

this._center = center

this._length = length

this._color = color

}

// 继承API的BMap.Overlay

SquareOverlay.prototype = new BMap.Overlay()

二、初始化自定义覆盖物

// 实现初始化方法

SquareOverlay.prototype.initialize = function(map){

// 保存map对象实例

this._map = map

// 创建div元素，作为自定义覆盖物的容器

var div = document.createElement("div")

div.style.position = "absolute"

// 可以根据参数设置元素外观

div.style.width = this._length + "px"

div.style.height = this._length + "px"

div.style.background = this._color

// 将div添加到覆盖物容器中

map.getPanes().markerPane.appendChild(div)

// 保存div实例

this._div = div

// 需要将div元素作为方法的返回值，当调用该覆盖物的show、

// hide方法，或者对覆盖物进行移除时，API都将 *** 作此元素。

return div

}

三、绘制覆盖物

// 实现绘制方法

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"

}

四、添加覆盖物

//添加自定义覆盖物

var mySquare = new SquareOverlay(map.getCenter(), 100, "red")

map.addOverlay(mySquare)

五、给自定义覆盖物添加事件

1、显示事件

SquareOverlay.prototype.show = function(){

if (this._div){

this._div.style.display = ""

}

}

添加完以上显示覆盖物事件后，只需要下面这句话，就可以显示覆盖物了。

mySquare.show()

2、隐藏覆盖物

// 实现隐藏方法

SquareOverlay.prototype.hide = function(){

if (this._div){

this._div.style.display = "none"

}

}

添加完以上code，只需使用这句话，即可隐藏覆盖物。

mySquare.hide()

3、改变覆盖物颜色

SquareOverlay.prototype.yellow = function(){

if (this._div){

this._div.style.background = "yellow"

}

}

上面这句话，是把覆盖物的背景颜色改成黄色，使用以下语句即可生效：

mySquare.yellow()

“第五部分、给覆盖物添加事件”小结：

我们在地图上添加了一个红色覆盖物，然后分别添加“显示、隐藏、改变颜色”的事件。示意图如下：

那么，我们需要在html里，先写出map的容器，和3个按钮。

<div style="width:520pxheight:340pxborder:1px solid gray" id="container"></div>

<p>

<input type="button" value="移除覆盖物" onclick="mySquare.hide()"/>

<input type="button" value="显示覆盖物" onclick="mySquare.show()"/>

<input type="button" value="变成黄色" onclick="mySquare.yellow()"/>

</p>

然后，在javascript中，添加这三个函数：

// 实现显示方法

SquareOverlay.prototype.show = function(){

if (this._div){

this._div.style.display = ""

}

}

// 实现隐藏方法

SquareOverlay.prototype.hide = function(){

if (this._div){

this._div.style.display = "none"

}

}

//改变颜色的方法

SquareOverlay.prototype.yellow = function(){

if (this._div){

this._div.style.background = "yellow"

}

}

六、如何给自定义覆盖物添加点击事件（这章重要！很多人问的）

比如，我们给自定义覆盖物点击click事件。首先，需要添加一个addEventListener 的事件。如下：

SquareOverlay.prototype.addEventListener = function(event,fun){

this._div['on'+event] = fun

}

再写该函数里面的参数，比如click。这样就跟百度地图API里面的覆盖物事件一样了。

mySquare.addEventListener('click',function(){

alert('click')

})

同理，添加完毕addEventListener之后，还可以添加其他鼠标事件，比如mouseover。

mySquare.addEventListener('mousemover',function(){

alert('鼠标移上来了')

})

七、全部源代码

自定义覆盖物

这个其实很简单，下面我简单介绍一下吧，主要过程如下：

1.首先，到百度地图开放平台注册一下开发者，这个直接用自己的百度账号就行，接着点击“控制台”->“创建应用”，如下，这里选择“浏览器端”，输入“应用名称”：

创建成功后，就会跳转到“应用列表”，刚才创建的应用就会显示出来，如下，这里我们需要记住AK这个值，后面的html页面中需要用到：

2.应用创建成功后，我们就可以在网页中引入地图了，代码其实很简单，主要是创建一个div容器，然后通过JS导入地图，完整代码如下：

接着我们用浏览器打开这个html页面，就能正常显示地图了，如下：

3.这里也可以引入地铁图，代码和上面的地图类似，也是需要创建一个div容器，然后再通过JS导入地铁图到div容器中，主要代码如下：

用浏览器打开这个html页面，效果如下，就能正常显示地铁图了：

至此，我们就完成了在网页中导入百度地图。整个过程其实很简单，就是创建div容器，然后通过JS将地图引入到div容器中进行显示就行，上面的代码都是官方提供的示例，可以直接到官网进行查看，或者在线编辑都行，只要你有一定的前端知识，熟悉一下相关代码和示例，很快就能掌握的，网上也有相关教程和资料，感兴趣的可以搜一下，希望以上分享的内容能对你有所帮助吧，也欢迎大家评论、留言。

方法/步骤

首先，打开HBuilder工具，新建一个空白的HTML5页面，如下图所示：

接着，利用meta标签设置HTML5编码格式以及地图不随浏览器的改变而改变的属性；并将百度地图的核心js引入到页面，

如下图所示：

地图要在页面上展示出来，需要有个容器。这里，在body标签内部插入一个div元素，并设置div的ID为map，

如下图所示：

页面展示的地图需要设置其宽度和高度，地图容器外面的元素需要随浏览器窗口大小而改变，所以设置宽度和高度为百分之百，字体为微软雅黑，隐藏水平和垂直滚动条，上下左右间距为0，如下图所示：

然后，创建地图并初始化地图，利用百度地图中的方法接口，

var map = new BMap.Map("map")map.centerAndZoom("武汉",19)

如下图所示：

最后，设置地图的一些 *** 作，利用地图的方法进行设置，设置完成后直接点击浏览器预览，

如下图所示：

---