Methoden und Schritte für den Zugriff auf die Baidu Maps API mit JavaScript

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=Ihr Schlüssel"></script>

var map = new BMapGL.Map("container"); // Eine Karteninstanz erstellen var point = new BMapGL.Point(116.404, 39.915); // Punktkoordinaten nach Breiten- und Längengrad des geografischen Standorts erstellen map.centerAndZoom(point, 15); // Karte initialisieren, Mittelpunktkoordinaten und Kartenebene festlegen

map.centerAndZoom(point, 15); // Karte initialisieren, Mittelpunktkoordinaten und Kartenebene festlegenmap.enableScrollWheelZoom(true); // Mausradzoom aktivierenmap.setMapType(BMAP_EARTH_MAP); // Kartentyp auf Erdmodus einstellen

var scaleCtrl = new BMapGL.ScaleControl(); // Skalierungssteuerung hinzufügenmap.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // Zoom-Steuerung hinzufügenmap.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // Städteliste hinzufügen controlmap.addControl(cityCtrl);
var locationControl = new BMapGL.LocationControl(); // Positionierungssteuerung hinzufügenmap.addControl(locationControl);

 // Aktuellen geografischen Standort abrufen und Kartenmittelpunkt zum Positionierungsort verschieben var geolocation = new BMapGL.Geolocation(); // Positionierungsobjekt erstellen geolocation.getCurrentPosition(function (r) { // Positionierungsfunktion über das Positionierungsobjekt aufrufen, der Callback-Funktionsparameter r stellt das Positionierungsergebnis dar if (this.getStatus() == BMAP_STATUS_SUCCESS) { // Wenn die Positionierung erfolgreich ist var mk = new BMapGL.Marker(r.point); // Markierung erstellen, r ist das Positionierungsergebnis, r.point ist der aktuelle Positionierungsort map.addOverlay(mk); // Markierungsobjekt zur Karte hinzufügen map.panTo(r.point); // Kartenmittelpunkt zum Positionierungsort verschieben // alert('Ihr Standort: ' + r.point.lng + ',' + r.point.lat);
  }
  anders {
    Warnung('fehlgeschlagen' + this.getStatus());
  }
});

  //Klickereignis zur Karte hinzufügenmap.addEventListener("click",function(e){
  //Parametername e Map-Klick-Ereignisquelle //console.log(e.latlng.lng+","+e.latlng.lat);
  var mk = new BMapGL.Marker(e.latlng); //Markierung erstellen, r ist das Positionierungsergebnis, r.point ist der aktuelle Positionierungsort map.addOverlay(mk); //Markierungsobjekt zur Karte hinzufügen })

 //Klickereignis zur Karte hinzufügenmap.addEventListener("click",function(e){
  //Parametername e Map-Klick-Ereignisquelle //console.log(e.latlng.lng+","+e.latlng.lat);
  var mk = new BMapGL.Marker(e.latlng);//Erstelle einen Marker, r ist das Positionierungsergebnis, r.point ist der aktuelle Positionierungsortmk.addEventListener("click",function(){//Füge dem Marker ein Klickereignis hinzuconsole.log(this);//this bezieht sich auf den Marker//Da der Marker ein untergeordneter Tag des Kartenobjekts map ist, werden beim Klicken auf den Marker Blasen angezeigt und das Klickereignis der Karte wird ebenfalls ausgelöst//Du kannst die stopPropagation-Funktion des Ereignisquellobjekts verwenden, um nachfolgende Ereignisblasen zu organisierensevent.stopPropagation();
  });
  map.addOverlay(mk); //Füge das Markierungsobjekt zur Karte hinzu})

//Informationsfenster hinzufügen (gekapselte Funktion)
Funktion addInfoWindow(Inhalt,Punkt,Breite,Höhe,Titel) {
  //Erforderliche Parameter Inhalt und Punkt
  //Inhalt kann entweder Text oder eine Beschriftung sein //Punkt ist der Breiten- und Längengrad eines geografischen Ortes //Die folgenden drei Parameter sind optional var opts = {
    width: Breite, // Breite des Informationsfensters height: Höhe, // Höhe des Informationsfensters title: Titel // Titel des Informationsfensters}
  var infoWindow = new BMapGL.InfoWindow(content, opts); // Informationsfensterobjekt erstellen map.openInfoWindow(infoWindow, point); // Informationsfenster öffnen }

//Fahrroutenplanungsobjekt //Dieses Objekt muss nach dem Laden der Karte erstellt werden. Normalerweise wird es nach dem Erstellen des Kartenobjekts map platziert. Und eine Webseite sollte nur einmal erstellt werden, sonst wird der zuletzt geplante Weg nicht gelöscht. driving = new BMapGL.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
//Verwende das Pfadplanungsobjekt, um die Route zu finden driving.clearResults(); //Lösche den letzten geplanten Pfad aus der Karte driving.search(startPoint, endPoint); //Starte die Pfadplanung, gib Start- und Endpunkt ein

//Busroutenplanungsobjekt //Die Erstellung des Busroutenplanungsobjekts muss nach dem Laden der Karte erfolgen. Normalerweise wird es nach der Erstellung des Kartenobjekts map platziert. Und eine Webseite sollte nur einmal erstellt werden, sonst wird die letzte geplante Route nicht gelöscht. transit = new BMapGL.TransitRoute(map, {
  Renderoptionen: {Karte: Karte},
  onSearchComplete: Funktion (Ergebnisse) {
    wenn (transit.getStatus() != BMAP_STATUS_SUCCESS) {
      zurückkehren;
    }
    //alert(results.getNumPlans());//Gesamtzahl der Busplanungsschemata abrufen//Hier die HTML-Vorlage zur Anzeige der Busroutenplanung entwerfen var output = '';
    für(var i=0;i<results.getNumPlans();i++){
      var plan = Ergebnisse.getPlan(i);
      Ausgabe +='<div style="margin-top:5px; background-color:#CCC"><p>Gesamtdauer:'+plan.getDuration(true)+'</p>';//Zeit abrufenAusgabe += '<p>Gesamtentfernung:'+plan.getDistance(true)+'</p>'; //Entfernung abrufenAusgabe +=plan.getDescription(true)+"</div>";
    }
    $('#result').css('display', 'block'); //#result ist ein von uns selbst definiertes Div. Wir verstecken es durch absolute Positionierung. Die Pfadplanung wird erfolgreich angezeigt. $('#result').html(output); // Setze die zusammengestellte Pfadplanungs-HTML-Tag-Vorlage in das #result-Div ein, um sie anzuzeigen. },
});
transit.clearResults(); // Die letzte geplante Route löschen transit.search(startPoint, endPoint); // Busroutenplanung

// Eine Geokodierungsinstanz erstellen var myGeo = new BMapGL.Geocoder();      
// Adressbeschreibung anhand der Koordinaten abrufen myGeo.getLocation(Längen- und Breitengradkoordinaten, function(result){
    //Funktion ist eine Rückruffunktion, die nur ausgeführt wird, nachdem bestimmte geografische Informationen gefunden wurden, wenn (Ergebnis){      
      Alarm (Ergebnis.Adresse);      
    }      
});

//Eine Instanz des Adressparsers erstellen var myGeo = new BMapGL.Geocoder();
// Ergebnis der Adressauflösung auf der Karte anzeigen und Kartenansicht anpassen myGeo.getPoint(address string (Hongqihegou, Chongqing), function(point){
    wenn(Punkt){
        //Punkt ist der Breiten- und Längengrad}else{
        alert('Die von Ihnen ausgewählte Adresse hat kein Ergebnis ergeben!');
    }
}, optionaler Parameter) //Optionaler Parameter zur Übergabe des Städtenamens. Wenn nicht übergeben, global suchen. Übergeben Sie den Städtenamen und suchen Sie nur in dieser Stadt.