So fügen Sie den Baidu-Map_Javascript-Fähigkeiten Steuerelemente für Skalierung, Miniaturansicht, Schwenken und Zoom hinzu

Im Folgenden finden Sie eine detaillierte Einführung in die Baidu-Karte mit Steuerelementen für Skalierung, Miniaturansichten, Schwenken und Zoomen mithilfe von Bildern und Texten.

Übersicht über die Kartensteuerung
Die UI-Elemente auf Baidu Maps, die für die Interaktion mit der Karte verantwortlich sind, werden als Steuerelemente bezeichnet. Die Baidu Map API bietet eine Fülle von Steuerelementen, und Sie können auch benutzerdefinierte Steuerelemente über die Control-Klasse implementieren.

Die in der Karten-API bereitgestellten Steuerelemente sind:

Control: Die abstrakte Basisklasse des Controls erben die Methoden und Eigenschaften dieser Klasse. Mit dieser Klasse können Sie benutzerdefinierte Steuerelemente implementieren.
NavigationControl: Kartenschwenk- und Zoomsteuerung. Sie befindet sich standardmäßig in der oberen linken Ecke der Karte. Sie umfasst die Funktion zum Steuern des Schwenkens und Zoomens der Karte. Die mobile Version bietet eine Zoomsteuerung, die sich standardmäßig unten rechts auf der Karte befindet.
OverviewMapControl: Die Miniaturansicht-Kartensteuerung, die sich standardmäßig unten rechts auf der Karte befindet, ist eine faltbare Miniaturansicht-Karte.
ScaleControl: Maßstabssteuerung, die sich standardmäßig unten links auf der Karte befindet und das Maßstabsverhältnis der Karte anzeigt.
MapTypeControl: Kartentyp-Steuerelement, das sich standardmäßig in der oberen rechten Ecke der Karte befindet.
CopyrightControl: Urheberrechtskontrolle, standardmäßig unten links auf der Karte platziert.
GeolocationControl: Positionierungssteuerung, entwickelt für mobile Endgeräte, standardmäßig unten links auf der Karte platziert
Fügen Sie der Karte Steuerelemente hinzu
Sie können die Methode Map.addControl() verwenden, um der Karte Steuerelemente hinzuzufügen. Zuvor muss die Karte initialisiert werden. Um beispielsweise ein Standardkartensteuerelement zu Ihrer Karte hinzuzufügen, fügen Sie Ihrem Code Folgendes hinzu:

Code kopieren Der Code lautet wie folgt:

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addControl(new BMap.NavigationControl());

Der Karte können mehrere Steuerelemente hinzugefügt werden. In diesem Beispiel fügen wir der Karte ein Schwenk- und Zoomsteuerelement, ein Skalierungssteuerelement und ein Miniaturbildsteuerelement hinzu. Sobald der Karte Steuerelemente hinzugefügt werden, werden sie sofort wirksam.

Code kopieren Der Code lautet wie folgt:

map.addControl(new BMap.NavigationControl());

map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.setCurrentCity("Beijing"); // Die Umschaltfunktion von MapTypeControl kann nur beim Festlegen von Stadtinformationen
verwendet werden


Steuerposition kontrollieren

Beim Initialisieren des Steuerelements können Sie einen optionalen Parameter angeben, in dem die Eigenschaften „Anker“ und „Offset“ gemeinsam die Position des Steuerelements auf der Karte steuern.

Der Anker der Andockposition des Steuerelements gibt die Andockposition des Steuerelements an, d. h. an welcher Ecke der Karte das Steuerelement angedockt ist. Wenn sich die Kartengröße ändert, passt das Steuerelement seine Position entsprechend der Andockstelle an. Die zulässigen Werte für Anker sind:

BMAP_ANCHOR_TOP_LEFT bedeutet, dass das Steuerelement in der oberen linken Ecke der Karte positioniert ist.

BMAP_ANCHOR_TOP_RIGHT gibt an, dass das Steuerelement in der oberen rechten Ecke der Karte positioniert ist.
BMAP_ANCHOR_BOTTOM_LEFT gibt an, dass das Steuerelement in der unteren linken Ecke der Karte positioniert ist. BMAP_ANCHOR_BOTTOM_RIGHT gibt an, dass das Steuerelement in der unteren rechten Ecke der Karte positioniert ist.

Positionsoffset steuern

Zusätzlich zur Angabe der Andockposition können Sie den Versatz auch verwenden, um anzugeben, wie viele Pixel das Steuerelement von der Kartengrenze entfernt ist. Wenn die Andockpositionen zweier Steuerelemente gleich sind, können sich die Steuerelemente überlappen. In diesem Fall kann der Offsetwert verwendet werden, um die beiden getrennt anzuzeigen.

In diesem Beispiel wird die Maßstabsleiste in der unteren linken Ecke der Karte platziert. Da die API standardmäßig über Copyright-Informationen verfügt, müssen einige Offset-Werte hinzugefügt werden, um eine Überlappung der Steuerelemente zu verhindern.

Code kopieren Der Code lautet wie folgt: var opts = {offset: new BMap.Size(150, 5)}

map.addControl(new BMap.ScaleControl(opts));

Steuerungskonfiguration ändern

Die Karten-API-Steuerelemente bieten eine Fülle von Konfigurationsparametern. Sie können sie in der API-Dokumentation ändern, um ein Steuerelement-Erscheinungsbild zu erhalten, das Ihren Anforderungen entspricht. Das NavigationControl-Steuerelement stellt beispielsweise die folgenden Typen bereit:

Code kopieren Der Code lautet wie folgt:

BMAP_NAVIGATION_CONTROL_LARGE gibt an, dass die vollständigen Schwenk- und Zoomsteuerelemente angezeigt werden.
BMAP_NAVIGATION_CONTROL_SMALL gibt an, dass eine kleine Schwenk- und Zoomsteuerung angezeigt wird.
BMAP_NAVIGATION_CONTROL_PAN gibt an, dass nur die Schwenkfunktion des Steuerelements angezeigt wird.
BMAP_NAVIGATION_CONTROL_ZOOM gibt an, dass nur der Zoom-Teil des Steuerelements angezeigt wird.

Das Bild unten zeigt das Erscheinungsbild der oben genannten verschiedenen Arten von Steuerelementen von links nach rechts:

Die ersten 4 im Bild oben sind die Schwenk- und Zoomsteuerungsstile auf der PC-Seite und der letzte ist der Zoomsteuerungsstil auf der mobilen Seite.

Im folgenden Beispiel wird das Erscheinungsbild des Kartensteuerelements zum Schwenken und Zoomen angepasst.

Die ersten 4 im Bild oben sind die Schwenk- und Zoom-Steuerungsstile auf der PC-Seite und der letzte ist der Zoom-Steuerungsstil auf der mobilen Seite.

Das folgende Beispiel passt das Erscheinungsbild der Kartensteuerung zum Schwenken und Zoomen an.

Miniaturansicht hinzufügen

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #allmap{width:100%;height:500px;}
    #r-result{width:100%;margin-top:5px;}
    p{margin:5px; font-size:14px;}
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api&#63;v=2.0&ak=您的密钥"></script>
  <title>添加/删除地图类型、缩略图控件</title>
</head>
<body>
  <div id="allmap"></div>
  <div id="r-result">
    <input type="button" onclick="add_control();" value="添加" />
    <input type="button" onclick="delete_control();" value="删除" />
  </div>
  <p>点击地图类型控件切换普通地图、卫星图、三维图、混合图（卫星图+路网），右下角是缩略图，点击按钮查看效果</p>
</body>
</html>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

  var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
  var mapType2 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});

  var overView = new BMap.OverviewMapControl();
  var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
  //添加地图类型和缩略图
  function add_control(){
    map.addControl(mapType1);     //2D图，卫星图
    map.addControl(mapType2);     //左上角，默认地图控件
    map.setCurrentCity("北京");    //由于有3D图，需要设置城市哦
    map.addControl(overView);     //添加默认缩略地图控件
    map.addControl(overViewOpen);   //右下角，打开
  }
  //移除地图类型和缩略图
  function delete_control(){
    map.removeControl(mapType1);  //移除2D图，卫星图
    map.removeControl(mapType2);
    map.removeControl(overView);
    map.removeControl(overViewOpen);
  }
</script>

Rendering

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.