2017-08-07 112 views
1

有沒有人有幸將一個單擊事件附加到InfoTemplate的HTML中構建的自定義按鈕?這裏是我的InfoTemplate HTML:ArcGIS JS API 3.21 InfoTemplate放大按鈕

uploadInfoTemplate = new InfoTemplate ({ 
    title: "", 
    content: "<strong>Segment:</strong> ${segment}" + 
      "<hr/>" + 
      "<strong>Time:</strong> <i>${dateTime}</i>" + 
      "<div style='width: 100%; text-align:right;'>" + 
       "<input class='zoomButton' type='button' value='Zoom to' />" + 
      "</div>" 
}); 

然後我在默認的InfoTemplate上有隱藏的項目,即zoomTo鏈接。我想簡單地用一個按鈕替換zoomTo的功能,使它看起來更好一點。

回答

0

如果你正在尋找剛剛提高的外觀「放大到」按鈕,CSS的幾行可以做的伎倆:

a.action.zoomTo { 
    color: #fff; 
    text-decoration: none; 
    background-color: #a8abaf; 
    border: solid #a8abaf; 
    border-radius: 5px; 
} 
    a.action.zoomTo:hover{ 
     background-color: #898b8e; 
     border: solid #898b8e; 
    } 

enter image description here

0

對不起@Jeremy揚鞭,

我忘了我修復了這個,忘了更新我的問題。我想出了這樣一個解決方案:

if(this.zoomButton) { 
    domConstruct.destroy(this.zoomButton); 
{ 

var zoomToButtonHTML = '<div style="width 100%;"><input class="zoomButton" type="button" value="Zoom to" /></div>'; 

this.zoomButton = domConstruct.create("div", { 
    "class": "action", 
    "id": "uploadLink", 
    "innerHTML": zoomToButtonHTML 
}, query(".actionList, this.map.infoWindow.domNode)[0]); 

var self=this; 
on(this.zoomButton, 'click', function(evt) { 
    self._zoomToPoint(evt. self.map); 
}); 

與CSS:

.zoomButton { 
    background: linear-gradient(#666666, #3F4041); 
    color: #ffffff; 
    border: 1px solid #000000; 
    border-radius: 0,2em; 
} 

.zoomButton:hover { 
    background: #333333; 
}