Google Maps JavaScript API V3 控制項

来源:http://www.cnblogs.com/lujun1949/archive/2017/11/01/7765174.html
-Advertisement-
Play Games

控制項概述 Google Maps 上的地圖包含用戶界面元素，可以讓用戶通過地圖進行交互。這些元素稱為“控制項”。您可以在 Google Maps API 應用程式中添加這些控制項的多種組合。或者，您也可以不進行任何操作，讓 Google Maps API 處理所有控制項行為。 Google Maps AP ...


控制項概述

Google Maps 上的地圖包含用戶界面元素，可以讓用戶通過地圖進行交互。這些元素稱為“控制項”。您可以在 Google Maps API 應用程式中添加這些控制項的多種組合。或者，您也可以不進行任何操作，讓 Google Maps API 處理所有控制項行為。

Google Maps API 帶有大量可以在地圖中使用的內置控制項：

  • 縮放控制項會顯示一個滑塊（對於大型地圖）或小型的“+/-”按鈕（對於小型地圖），用於控制地圖的縮放級別。在非觸摸的設備上，該控制項預設顯示在地圖的左上角，而在觸摸設備上則會出現在左下角。
  • 平移控制項顯示了用於平移地圖的按鈕。在非觸摸的設備上，該控制項預設顯示在地圖的左上角。您還可以使用平移控制項對圖像進行 45° 旋轉（如果可用的話）。
  • 比例控制項，用於顯示地圖比例元素。預設情況下，系統不會啟用此控制項。
  • MapType 控制項，可讓用戶在不同的地圖類型（例如 ROADMAP 和 SATELLITE）之間進行切換。該控制項預設顯示在地圖的右上角。
  • Street View 控制項包含一個街景小人圖標，將該圖標拖動到地圖上即可啟用 Street View。該控制項預設顯示在地圖的左上角。
  • 旋轉控制項包含一個較小的圓形圖標，可讓您旋轉包含斜面圖像的地圖。該控制項預設顯示在地圖的左上角（有關詳情，請參見 45° 圖像）。
  • 總覽圖控制項會顯示一個簡略的總覽圖，用於在更廣闊區域內反映當前的地圖視口。該控制項預設以壓縮狀態顯示在地圖的右下角。

請註意：以前提供的導航控制項已棄用，系統已將其分割為獨立的縮放和平移控制項。

您無法直接訪問或修改這些地圖控制項，而應修改地圖的 MapOptions 欄位，這些欄位會影響控制項的可見性和顯示方式。您可以在初始化地圖時調整控制項的顯示（使用適當MapOptions），或者通過調用 setOptions() 以更改地圖的選項，對地圖進行動態修改。

預設情況下，系統並不會啟用所有這些控制項。要瞭解有關預設用戶界面行為（以及如何修改此類行為）的信息，請參閱下麵的預設用戶界面部分。

預設用戶界面

您可能只想指定自己的地圖展示 Google Maps 界面的外觀（其中包括以後要添加到地圖中的所有新特征或控制項），而不想指定和設置單獨的控制項。要實現此行為，您無需進行任何操作。地圖將會顯示預設控制項。

預設控制項集

Google Maps API 提供了以下預設控制項：

控制項大屏幕小屏幕iPhoneAndroid
縮放 大型縮放控制項，適用於 400x350 像素以上的屏幕 小型縮放控制項，適用於 400x350 像素以下的屏幕 不顯示。縮放是通過兩根手指的開合操作來實現的。 “觸摸”式控制項
平移 對 400x350 像素以上的屏幕顯示 對 400x350 像素以下的屏幕不顯示 不顯示。平移是通過觸摸來實現的。 不顯示。平移是通過觸摸來實現的。
MapType 水平欄，適用於寬度在 320 像素以上的屏幕 下拉菜單，適用於寬度在 320 像素以下的屏幕 與大屏幕/小屏幕相同 與大屏幕/小屏幕相同
比例 不存在 不存在 不存在 不存在

此外，預設情況下，系統對所有設備都啟用了鍵盤處理功能。

停用預設用戶界面

有時，您可能希望關閉 API 的預設用戶界面設置。要進行上述操作，請將 Map 的 disableDefaultUI 屬性（在 Map options 對象中）設置為 true。此屬性可停用 Google Maps API 中所有自動執行的用戶界面行為。

 

以下代碼可徹底停用預設用戶界面：

function initialize() {
  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
       myOptions);
}

查看示例 (control-disableUI.html)

向地圖添加控制項

您可能想要通過刪除、添加或修改用戶界面行為或控制項調整您的界面，並確保即使以後進行了更新，也不會改變這種行為。如果您只想添加或修改現有的行為，您需要確保以顯式的方式將相應的控制項添加到自己的應用程式中。

有些控制項在預設情況下會出現在地圖上，而其他控制項則只有在您明確提出相關請求後，才會顯示出來。在地圖中添加控制項，或者從地圖中刪除控制項都是在以下 Map options 對象的欄位中指定的，您可以將這些欄位設置為 true 以顯示相應的控制項，或者設置為 false 以隱藏相應的控制項：

{
  panControl: boolean,
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  overviewMapControl: boolean
}

以下示例對地圖進行了設置，使其隱藏導航（縮放和平移）控制項，同時顯示比例控制項。請註意，我們並未顯式停用預設用戶界面，因此，您可在預設用戶界面行為中加入這些修改。

function initialize() {
  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    panControl: false,
    zoomControl: false,
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
}

查看示例 (control-simple.html)

控制項選項

有些控制項是可以配置的，這樣，您就可以更改它們的行為或外觀。例如，縮放控制項可顯示為帶有滑塊的大型完整控制項，也可以顯示為適用於較小地圖的小型迷你縮放控制項。

您可以在創建地圖時更改 MapOptions 對象內適當的控制項選項欄位，從而對這些控制項進行修改。例如，用於更改縮放控制項的選項位於 zoomControlOptions 欄位中。

縮放控制項可能出現在以下某個 style 選項中：

  • google.maps.ZoomControlStyle.SMALL，用於顯示迷你縮放控制項，其中僅限 ＋ 和 － 按鈕。此樣式適用於小型地圖。在觸摸設備上，該控制項顯示為可響應觸摸事件的 + 和 -按鈕。
  • google.maps.ZoomControlStyle.LARGE 用於顯示標準縮放滑塊控制項。在觸摸設備上，該控制項顯示為可響應觸摸事件的 + 和 - 按鈕。
  • google.maps.ZoomControlStyle.DEFAULT 會按照地圖大小和運行地圖的設備來挑選合適的縮放控制項。

MapType 控制項可顯示為以下 style 選項之一：

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR，用於在水平欄中將一組控制項顯示為如 Google Maps 中所示按鈕。
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU，用於顯示單個按鈕控制項，以便您從下拉菜單中選擇地圖類型。
  • google.maps.MapTypeControlStyle.DEFAULT，用於顯示“預設”的行為，該行為取決於屏幕尺寸，並且可能會在 API 以後的版本中有所變化。

請註意，如果您確實想要修改任何控制項選項，您還是應當通過將 MapOptions 值設置為 true 以顯式地啟用相應的控制項。例如，要將縮放控制項設置為顯示 SMALL 樣式，請在MapOptions 對象內使用以下代碼：

  ...
  zoomControl: true,
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
  }
  ...

以下示例設置了一個下拉 MapType 控制項，並指定縮放控制項使用小型迷你縮放佈局：

function initialize() {
  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
}

查看示例 (control-options.html)

控制項通常是在創建地圖時配置的。但是，您可以通過調用 Map 的 setOptions() 方法併為其傳遞新的控制項選項動態更改控制項的顯示。

修改控制項

您可以在創建地圖時通過地圖的 MapOptions 對象中的欄位指定控制項的顯示。下麵對這些欄位進行了說明：

  • mapTypeControl 可啟用/停用“地圖類型”控制項，該控制項允許用戶在地圖類型（如“地圖”和“衛星”）之間切換。預設情況下，此控制項將顯示在地圖右上角。mapTypeControlOptions 欄位可進一步指定要用於此控制項的 MapTypeControlOptions。
  • panControl 可啟用/停用平移控制項。預設情況下，此控制項將顯示在地圖左上角。panControlOptions 欄位可進一步指定要用於此控制項的 PanControlOptions。
  • zoomControl 可啟用/停用縮放控制項。預設情況下，此控制項將顯示在地圖左上角。zoomControlOptions 欄位可進一步指定要用於此控制項的 ZoomControlOptions。
  • scaleControl 可啟用/停用“比例”控制項，該控制項可提供一個簡單的地圖比例尺。預設情況下，不會顯示此控制項。啟用後，它將顯示在地圖的左下角。scaleControlOptions 可進一步指定用於此控制項的 ScaleControlOptions。
  • rotateControl 可決定顯示/不顯示用於控制 45° 圖像方向的旋轉控制項。預設情況下，該控制項是否顯示取決於指定的地圖類型在當前縮放級別和位置上是否存在 45° 圖像。要更改控制項的行為，您可以設置地圖的 rotateControlOptions 以指定要使用的 RotateControlOptions（不過，如果當前沒有可用的 45° 圖像，則無法顯示該控制項）。
  • overviewMapControl 可啟用/停用總覽圖控制項。總覽圖控制項可以顯示為完整的控制項（展示簡略的總覽圖），也可以顯示為壓縮的最小化狀態。預設情況下，該控制項處於停用和壓縮狀態。overviewMapControlOptions 可進一步指定用於此控制項的 OverviewMapControlOptions。

請註意，您可以為您最初停用的控制項指定選項。

控制項定位

每個控制項選項都包含一個 position 屬性（類型為 ControlPosition），它指明要在地圖上放置該控制項的位置。控制項的定位並不是絕對的；相反，API 會在給定的約束條件（如地圖大小）下，通過圍繞現有地圖元素或其他控制項“流動”控制項以智能方式佈局控制項。註意：雖然 API 會嘗試以智能方式排列控制項，但這並不能保證控制項不會疊加指定的複雜佈局。

系統支持以下控制項位置：

  • TOP_CENTER 表示控制項應沿著地圖頂部中心放置。
  • TOP_LEFT 表示控制項應沿著地圖頂部左側放置，控制項的任何子元素“流”向頂部中心。
  • TOP_RIGHT 表示控制項應沿著地圖頂部右側放置，控制項的任何子元素“流”向頂部中心。
  • LEFT_TOP 表示控制項應沿著地圖頂部左側放置，但應位於所有 TOP_LEFT 元素的下方。
  • RIGHT_TOP 表示控制項應沿著地圖頂部右側放置，但應位於所有 TOP_RIGHT 元素的下方。
  • LEFT_CENTER 表示控制項應沿著地圖左側放置，位於 TOP_LEFT 和 BOTTOM_LEFT 位置的中間。
  • RIGHT_CENTER 表示控制項應沿著地圖右側放置，位於 TOP_RIGHT 和 BOTTOM_RIGHT 位置的中間。
  • LEFT_BOTTOM 表示控制項應沿著地圖底部左側放置，但應位於所有 BOTTOM_LEFT 元素的上方。
  • RIGHT_BOTTOM 表示控制項應沿著地圖底部右側放置，但應位於所有 BOTTOM_RIGHT 元素的上方。
  • BOTTOM_CENTER 表示控制項應沿著地圖底部中心放置。
  • BOTTOM_LEFT 表示控制項應沿著地圖底部左側放置，控制項的任何子元素“流”向底部中心。
  • BOTTOM_RIGHT 表示控制項應沿著地圖底部右側放置，控制項的任何子元素“流”向底部中心。

請註意，這些位置可能會與用戶界面元素的位置相衝突，而您無法修改用戶界面元素（如版權和 Google 徽標）的位置。在這種情況下，控制項將按照每個位置的邏輯說明“流動”，並顯示在儘可能靠近指定位置的位置。

下麵的示例顯示了一個簡單的地圖，其中啟用了位於不同位置的所有控制項。

function initialize() {
  var myOptions = {
    zoom: 12,
    center: new google.maps.LatLng(-28.643387, 153.612224),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.BOTTOM_CENTER
    },
    panControl: true,
    panControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    scaleControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
    },
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    }
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
}

查看示例 (control-positioning.html)

自定義控制項

除了修改現有 API 控制項的樣式和位置外，您還可以創建自己的控制項以處理與用戶的交互操作。控制項是固定的視窗小部件，浮動在地圖之上的絕對位置處；這與“疊加”不同，後者會隨下麵的地圖一起移動。從本質上講，控制項只是一個在地圖上具有絕對位置的 <div> 元素，它會向用戶顯示某個用戶界面，並處理與用戶或地圖的交互（通常通過某個事件處理程式）。

要創建您自己的自定義控制項，沒有什麼需要遵循的“規則”。不過，您可以將以下指導原則視為最佳實踐的參考：

  • 為待顯示的控制項元素定義適當的 CSS。
  • 針對地圖屬性更改或用戶事件（如 'click' 事件），通過事件處理程式處理與用戶或地圖的交互。
  • 創建一個 <div> 元素以承載控制項並將此元素添加到 Map 的 controls 屬性中。

下麵將分別對上述原則加以說明。

繪製自定義控制項

如何繪製控制項由您自己決定。一般來講，我們建議您將所有控制項的顯示方式放在一個單獨的 <div> 元素中，以便可以將控制項作為一個單元進行處理。我們將在下麵所示的示例中使用這種設計模式。

設計具有吸引力的控制項需要具備一些 CSS 和 DOM 結構方面的知識。以下代碼顯示瞭如何通過一個 <div> 容器、一個承載按鈕輪廓的 <div> 和另一個承載按鈕內部事項的 <div> 創建一個簡單的控制項。

// Create a div to hold the control.
var controlDiv = document.createElement('DIV');

// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';

// Set CSS for the control border
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior
var controlText = document.createElement('DIV');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Home';
controlUI.appendChild(controlText);

處理自定義控制項的事件

要使控制項有用，它必須能夠實際完成某些任務。控制項的用途由您確定。控制項可以響應用戶輸入，也可以響應 Map 的狀態變化。

為響應用戶輸入，Maps API 提供了一個跨瀏覽器的事件處理方法 addDomListener()，它可以處理瀏覽器的多數支持的 DOM 事件。以下代碼段為瀏覽器的 'click' 事件添加了一個偵聽器。請註意，此事件是從 DOM 接收的，而不是從地圖。

// Setup the click event listener: simply set the map to center on Chicago
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

google.maps.event.addDomListener(outer, 'click', function() {
  map.setCenter(chicago)
});

定位自定義控制項

要在地圖上定位自定義控制項，您可以在 Map 對象的 controls 屬性中將其放在適當位置。此屬性包含一個 google.maps.ControlPosition 數組。您可以通過將 Node（通常是<div>）添加至適當 ControlPosition 向地圖中添加自定義控制項。（有關這些位置的信息，請參見上面的控制項定位。）

每個 ControlPosition 會存儲一個顯示在該位置的控制項的 MVCArray。因此，當您向該位置添加或從中刪除控制項時，API 將相應更新控制項。

API 按照 index 屬性的順序將控制項放在每個位置，並會首先放置索引值較低的控制項。例如，位置 BOTTOM_RIGHT 處的兩個自定義控制項將按照此索引順序進行排列，並優先放置索引值較低的控制項。預設情況下，所有自定義控制項將在放置完任何 API 預設控制項之後進行放置。您可以通過將控制項的 index 屬性設置為一個負值覆蓋此行為。請註意，如果希望在放置相同位置的預設 API 控制項“之前”放置您的控制項，通常只需設置一個索引值。

以下代碼將創建一個新的自定義控制項（未顯示其構造函數）並將其添加到地圖中的 TOP_RIGHT 位置。

var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

// Construct your control in whatever manner is appropriate.
// Generally, your constructor will want access to the
// DIV on which you'll attach the control UI to the Map.
var controlDiv = document.createElement('DIV');
var myControl = new MyControl(controlDiv);

// We don't really need to set an index value here, but
// this would be how you do it. Note that we set this
// value as a property of the DIV itself.
controlDiv.index = 1;

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);

自定義控制項示例

下麵是一個簡單的控制項（儘管不是很實用），其中綜合了上面所示的模式。該控制項通過將地圖在某個預設位置居中來響應 DOM 'click' 事件：

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

/**
 * The HomeControl adds a control to the map that simply
 * returns the user to Chicago. This constructor takes
 * the control DIV as an argument.
 */

function HomeControl(controlDiv, map) {

  // Set CSS styles for the DIV containing the control
  // Setting padding to 5 px will offset the control
  // from the edge of the map
  controlDiv.style.padding = '5px';

  // Set CSS for the control border
  var controlUI = document.createElement('DIV');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior
  var controlText = document.createElement('DIV');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = 'Home';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago
  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(chicago)
  });
}

function initialize() {
  var mapDiv = document.getElementById('map_canvas');
  var myOptions = {
    zoom: 12,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(mapDiv, myOptions);

  // Create the DIV to hold the control and call the HomeControl() constructor
  // passing in this DIV.
  var homeControlDiv = document.createElement('DIV');
  var homeControl = new HomeControl(homeControlDiv, map);

  homeControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}

查看示例 (control-custom.html)

為控制項添加狀態

控制項也可以存儲狀態。下麵的示例與前面所示的類似，但該控制項包含了一個額外的“Set Home”按鈕，它將控制項設置為顯示一個新首頁位置。為此，我們在該控制項內創建一個 home_ 屬性以存儲此狀態，併為該狀態提供了獲取函數和設置函數。

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

/**
 * The HomeControl adds a control to the map that
 * returns the user to the control's defined home.
 */

// Define a property to hold the Home state
HomeControl.prototype.home_ = null;

// Define setters and getters for this property
HomeControl.prototype.getHome = function() {
  return this.home_;
}

HomeControl.prototype.setHome = function(home) {
  this.home_ = home;
}

function HomeControl(map, div, home) {

  // Get the control DIV. We'll attach our control UI to this DIV.
  var controlDiv = div;

  // We set up a variable for the 'this' keyword since we're adding event
  // listeners later and 'this' will be out of scope.
  var control = this;

  // Set the home property upon construction
  control.home_ = home;

  // Set CSS styles for the DIV containing the control. Setting padding to
  // 5 px will offset the control from the edge of the map
  controlDiv.style.padding = '5px';

  // Set CSS for the control border
  var goHomeUI = document.createElement('DIV');
  goHomeUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(goHomeUI);

  // Set CSS for the control interior
  var goHomeText = document.createElement('DIV');
  goHomeText.innerHTML = 'Home';
  goHomeUI.appendChild(goHomeText);
  
  // Set CSS for the setHome control border
  var setHomeUI = document.createElement('DIV');
  setHomeUI.title = 'Click to set Home to the current center';
  controlDiv.appendChild(setHomeUI);

  // Set CSS for the control interior
  var setHomeText = document.createElement('DIV');
  setHomeText.innerHTML = 'Set Home';
  setHomeUI.appendChild(setHomeText);

  // Setup the click event listener for Home:
  // simply set the map to the control's current home property.
  google.maps.event.addDomListener(goHomeUI, 'click', function() {
    var currentHome = control.getHome();
    map.setCenter(currentHome);
  });

  // Setup the click event listener for Set Home:
  // Set the control's home to the current Map center.
  google.maps.event.addDomListener(setHomeUI, 'click', function() {
    var newHome = map.getCenter();
    control.setHome(newHome);
  });
}

function initialize() {
  var mapDiv = document.getElementById('map_canvas');
  var myOptions = {
    zoom: 12,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(mapDiv, myOptions);

  // Create the DIV to hold the control and call the HomeControl()
  // constructor passing in this DIV.
  var homeControlDiv = document.createElement('DIV');
  var homeControl = new HomeControl(map, homeControlDiv, chicago);

  homeControlDiv.
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Nuget~打包時添加powershell初始化腳本
    對於進行nuget打包時，有時我們需要添加一個配置文件，就是一些文本文件，而這些文件我們在網站發佈時需要同時複製到輸出目錄，否則會出現文件丟失的問題，我們在打包時通過添加powershell腳本來解決它。 一般添加powershell包之後，包的格式如下 添加－〉工具－〉install.ps1腳本 ...
  • 演算法 (對象的理解)
    首先不得不提的一個概念是, 類 與 對象; 這在 任何面向對象的語言中, 都是一個優先度極高的概念, 我首先瞭解到的概念則是: 類是對象的集合, 是對象的抽象化, 對象是類的實例, 是類的具象化. 在歸納總結中, 將具有某些共同屬性 及 方法的概念, 實物, 進行抽象化, 就是在 java 中常常談 ...
  • 實現網站驗證碼切換功能
    實現網站驗證碼切換功能 一、樣例 樣例1、 樣例2、 二、實現原理 三、實現代碼 com.fry.servlet.VerifyCodeServlet verifyCode.html 要讓按鈕一直能點 ...
  • 03-從零玩轉JavaWeb-創建類與對象
    創建類創建對象 一、什麼是成員變數 對象的一些狀態特征使用成員變數表示 二、行為什麼什麼表示 對象的 行為 使用 方法 表示 三、如何創建對象 class 類名{0 ~ N個成員變數0 ~ N個方法} 註意1:若類使用public修飾,則當前所在的文件名必須和類名相同2:類型必須符合標識符的命名規範 ...
  • JS獲取對象“屬性和方法”的方法
    平時在寫的代碼過程中，經常會遇到對對象Object的數據處理。而在對對象的數據處理中，操作最頻繁的是“數據引用”、“值的修改”、“獲取關鍵字(屬性)”。平時最煩的也是“獲取關鍵字”，經常忘記怎麼去獲取，這裡做一下整理。 既然要"獲取關鍵字"，那麼得首先有一個對象才行。創建對象的方式很多，我自己慣用的 ...
  • vue slot
    一般我發現slot都是用在子組件 不知道對不對，不對的請留言指教 ，謝謝謝謝 使用slot場景一： 子組件Minput.vue 父組件 Minput 這種情況下 Minput標簽內的文字是不會渲染出來的 如果現在想在裡面把文字渲染出來怎麼辦 好 用slot 子組件 這樣的話，父組件的裡面的文字就可以 ...
  • chrome調試工具
    今天在調試bug的時候有一個需求，我需要知道我的代碼中有哪些地方在修改body的style，然後我想到了DOM節點監聽。 為body添加斷點然後開始調試，但是現在的前端技術棧太複雜，即使打了斷點也會跳進第三方包里。調用棧里有太多無關的js代碼，妨礙調試。 所以你可以選中文件右擊後，選擇Blackbo ...
  • vscode 調試node.js
    在開發的過程中，幾乎不可能一次性就能寫出毫無破綻的程式，斷點調試代碼是一個普遍的需求。 作為前端開發工程師，以往我們開發的JavaScript程式都運行在瀏覽器端，利用Chrome提供的開發者工具就可以方便的進行源碼斷點調試。其步驟有四，詳情不表，粗略概括如下： 但是，當我們用JavaScript開 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類