日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
百度地圖API如何給自定義覆蓋物添加事件

摘要：

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國際域名空間、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、青山湖網(wǎng)站維護(hù)、網(wǎng)站推廣。

　　給marker、lable、circle等Overlay添加事件很簡單，直接addEventListener即可。那么，自定義覆蓋物的事件應(yīng)該如何添加呢？我們一起來看一看~

　　一、定義構(gòu)造函數(shù)并繼承Overlay

 
 
 
 
    
  
  
  
  
  1. 　　//定義自定義覆蓋物的構(gòu)造函數(shù) 
    2. 
  
  
  
  
  2. 　　functionSquareOverlay(center, length, color){ 
    3. 
  
  
  
  
  3. 　　this._center = center; 
    4. 
  
  
  
  
  4. 　　this._length = length; 
    5. 
  
  
  
  
  5. 　　this._color = color; 
    6. 
  
  
  
  
  6. 　　} 
    7. 
  
  
  
  
  7. 　　//繼承API的BMap.Overlay 
    8. 
  
  
  
  
  8. 　　SquareOverlay.prototype = newBMap.Overlay();
    9.

　　二、初始化自定義覆蓋物

 
 
 
 
    
  
  
  
  
  1. 　　//實(shí)現(xiàn)初始化方法 
    2. 
  
  
  
  
  2. 　　SquareOverlay.prototype.initialize = function(map){ 
    3. 
  
  
  
  
  3. 　　//保存map對(duì)象實(shí)例 
    4. 
  
  
  
  
  4. 　　this._map = map; 
    5. 
  
  
  
  
  5. 　　//創(chuàng)建div元素，作為自定義覆蓋物的容器 
    6. 
  
  
  
  
  6. 　　vardiv = document.createElement("div"); 
    7. 
  
  
  
  
  7. 　　div.style.position = "absolute"; 
    8. 
  
  
  
  
  8. 　　//可以根據(jù)參數(shù)設(shè)置元素外觀 
    9. 
  
  
  
  
  9. 　　div.style.width = this._length + "px"; 
    10. 
  
  
  
  
  10. 　　div.style.height = this._length + "px"; 
    11. 
  
  
  
  
  11. 　　div.style.background = this._color; 
    12. 
  
  
  
  
  12. 　　//將div添加到覆蓋物容器中 
    13. 
  
  
  
  
  13. 　　map.getPanes().markerPane.appendChild(div); 
    14. 
  
  
  
  
  14. 　//保存div實(shí)例 
    15. 
  
  
  
  
  15. 　　this._div = div; 
    16. 
  
  
  
  
  16. 　　//需要將div元素作為方法的返回值，當(dāng)調(diào)用該覆蓋物的show、 
    17. 
  
  
  
  
  17. 　　//hide方法，或者對(duì)覆蓋物進(jìn)行移除時(shí)，API都將操作此元素。 
    18. 
  
  
  
  
  18. 　　returndiv; 
    19. 
  
  
  
  
  19. 　　}
    20.

　　三、繪制覆蓋物

 
 
 
 
    
  
  
  
  
  1. 　　//實(shí)現(xiàn)繪制方法 
    2. 
  
  
  
  
  2. 　　SquareOverlay.prototype.draw = function(){ 
    3. 
  
  
  
  
  3. 　　//根據(jù)地理坐標(biāo)轉(zhuǎn)換為像素坐標(biāo)，并設(shè)置給容器 
    4. 
  
  
  
  
  4. 　　varposition = this._map.pointToOverlayPixel(this._center); 
    5. 
  
  
  
  
  5. 　　this._div.style.left = position.x - this._length / 2 + "px"; 
    6. 
  
  
  
  
  6. 　　this._div.style.top = position.y - this._length / 2 + "px"; 
    7. 
  
  
  
  
  7. 　　}
    8.

　　四、添加覆蓋物

 
 
 
 
    
  
  
  
  
  1. 　　//添加自定義覆蓋物 
    2. 
  
  
  
  
  2. 　　varmySquare = newSquareOverlay(map.getCenter(), 100, "red"); 
    3. 
  
  
  
  
  3. 　　map.addOverlay(mySquare);
    4.

　　五、給自定義覆蓋物添加事件

　　1、顯示事件

 
 
 
 
    
  
  
  
  
  1. 　　SquareOverlay.prototype.show = function(){ 
    2. 
  
  
  
  
  2. 　　if(this._div){ 
    3. 
  
  
  
  
  3. 　　this._div.style.display = ""; 
    4. 
  
  
  
  
  4. 　　} 
    5. 
  
  
  
  
  5. 　　}
    6.

　　添加完以上顯示覆蓋物事件后，只需要下面這句話，就可以顯示覆蓋物了。

　　mySquare.show();

　　2、隱藏覆蓋物

 
 
 
 
    
  
  
  
  
  1. 　　//實(shí)現(xiàn)隱藏方法 
    2. 
  
  
  
  
  2. 　　SquareOverlay.prototype.hide = function(){ 
    3. 
  
  
  
  
  3. 　　if(this._div){ 
    4. 
  
  
  
  
  4. 　　this._div.style.display = "none"; 
    5. 
  
  
  
  
  5. 　　} 
    6. 
  
  
  
  
  6. 　　}
    7.

　　添加完以上code，只需使用這句話，即可隱藏覆蓋物。

　　mySquare.hide();

　　3、改變覆蓋物顏色

 
 
 
 
    
  
  
  
  
  1. 　　SquareOverlay.prototype.yellow = function(){ 
    2. 
  
  
  
  
  2. 　　if(this._div){ 
    3. 
  
  
  
  
  3. 　　this._div.style.background = "yellow"; 
    4. 
  
  
  
  
  4. 　　} 
    5. 
  
  
  
  
  5. 　　}
    6.

　　上面這句話，是把覆蓋物的背景顏色改成黃色，使用以下語句即可生效：

　　mySquare.yellow();

　　“第五部分、給覆蓋物添加事件”小結(jié)：

　　我們在地圖上添加了一個(gè)紅色覆蓋物，然后分別添加“顯示、隱藏、改變顏色”的事件。示意圖如下：

那么，我們需要在html里，先寫出map的容器，和3個(gè)按鈕。

 
 
 
 
    
  
  
  
  
  1. 　　
  • 　　

  • 　　
  • 　　
  • 　　
  • 　　

  • 　　然后，在javascript中，添加這三個(gè)函數(shù)：
  • 　　//實(shí)現(xiàn)顯示方法
  • 　　SquareOverlay.prototype.show = function(){
  • 　　if(this._div){
  • 　　this._div.style.display = "";
  • 　　}
  • 　　}
  • 　　//實(shí)現(xiàn)隱藏方法
  • 　　SquareOverlay.prototype.hide = function(){
  • 　　if(this._div){
  • 　　this._div.style.display = "none";
  • 　　}
  • 　　}
  • 　　//改變顏色的方法
  • 　　SquareOverlay.prototype.yellow = function(){
  • 　if(this._div){
  • 　　this._div.style.background = "yellow";
  • 　　}
  • 　　}

    • 　　六、如何給自定義覆蓋物添加點(diǎn)擊事件（這章重要！很多人問的）

    　　比如，我們給自定義覆蓋物點(diǎn)擊click事件。首先，需要添加一個(gè)addEventListener 的事件。如下：

     
 
 
 
      
  
  
  
  
    1. 　　SquareOverlay.prototype.addEventListener = function(event,fun){ 
      2. 
  
  
  
  
    2. 　　this._div['on'+event] = fun; 
      3. 
  
  
  
  
    3. 　　}
      4.

    　　再寫該函數(shù)里面的參數(shù)，比如click。這樣就跟百度地圖API里面的覆蓋物事件一樣了。

     
 
 
 
      
  
  
  
  
    1. 　　mySquare.addEventListener('click',function(){ 
      2. 
  
  
  
  
    2. 　　alert('click'); 
      3. 
  
  
  
  
    3. 　　});
      4.

    　　同理，添加完畢addEventListener之后，還可以添加其他鼠標(biāo)事件，比如mouseover。

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

    　　alert('鼠標(biāo)移上來了');

    　　});

    　　七、全部源代碼

    自定義覆蓋物

     
 
 
 
      
  
  
  
  
    1. 
  
  
  
  
    2. 
  
  
  
  
    3. 
  
  
  
  
      5. 
  
  
  
  
    5. 自定義覆蓋物的點(diǎn)擊事件
      6. 
  
  
  
  
    6. 
  
  
  
  
    7. 
  
  
  
  
    8.

  • 　　八、感謝大家支持！


    標(biāo)題名稱：百度地圖API如何給自定義覆蓋物添加事件
    轉(zhuǎn)載來于：http://www.dlmjj.cn/article/dhsgjco.html