Dieser Artikel beschreibt die Anwendung der SOGOU MAP -API, die eine sehr praktische Technik ist. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Initialisierung der Karte
1. Fügen Sie eine API -Datei hinzu, die auf die Karte verweist:
<script src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js" type = "text/javascript"> </script>
2. Website -Initialisierung Ladeereignis:
window.onload = function () {var map = new SOGOU.MAPS.MAP (document.getElementById ("map_canvas"), {});}Erstellen Sie ein DIV mit ID map_canvas, benutzerdefinierten Div -Stil und die Karte wird automatisch geladen, wenn die Website ausgeführt wird.
Der spezifische Code ist wie folgt
<html xmlns = "http://www.w3.org/1999/xhtml"> <head runat = "server"> <title> <style type = "text/css"> html {Höhe: auto;} body {height: auto; {width: 1000px; Höhe: 500px; Position: Absolute;}@Media print {#map_canvas {Höhe: 950px;}} </style> <script src = "http://xiazai.vevb.com/201409/thows.v.v2.1.1.1.js" type = function () { var map = new sogou.maps.Map(document.getElementById("map_canvas"), {});}</script></head><body> <form id="form1" runat="server"> <div id="map_canvas"></div> </form></body></html>Geben Sie die Anzeige der Mocheng -Karte an
Der Schlüsselcode lautet wie folgt:
window.onload = function () { var myOptions = { zoom: 10,center: new sogou.maps.Point(12956000, 4824875) };//City coordinates, this coordinate is Beijing coordinate var map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions); }Karteneigenschaften verstehen
Listen Sie einige häufig verwendete Eigenschaften auf, wie z.
Der spezifische Code ist wie folgt
<html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1" runat = "server"> <title> </title> <style type = "text/csS"> html {Höhe: auto;} body {height: auto; {width: 1000px; Höhe: 500px; Position: Absolute;}@Media Print {#map_canvas {Höhe: 950px;}} </style> <script src = "http://xiazai.VEVB.com/201409/OTHOPI_V2.1.1.1.js" type MAP; // Global Variable Fenster erstellen.onload = function () {var myoptions = {zoom: 10, zentrum: new sOgou.maps.point (12956000, 4824875)}; // City map = newou.maps.map (document. setMaptypeId (num) {// Kartentyp einstellen, z. map // map.setMaptypeId (SOGOU.MAPS.MAPTYPEID.HYBRID) Switch (num) {case 1: map.setMaptypeId (SOGOU.MAPS.MAPTYPEID.ROADMAP); brechen; // Normal Map Case 2: map.setMaptypeId (SOGOU.MAPS.MAPTYPEID.SATELLITE); brechen; // Satellite Map Fall 3: map.setMaptypeId (SOGOU.MAPS.MAPTYPEID.HYBRID); brechen; //Satellite and road network mixed map}}//panBy method example map manually move function panBy(a, b) { map.panBy(a, b)}//SetOptions method example displays the specified region function setOptions() { //Set the map center, level, and type map.setOptions({ center: new sogou.maps.Point(13522000, 3641093), zoom: 12, mapTypeId: sogou.maps.MapTypeId.ROADMAP })}//setCenter method example shows that the specified regions a and b are map coordinates and C are map level function setCenter(a, b, c) { map.setCenter(new sogou.maps.Point(a, b), c)}//fitBounds method example jumps to the specified range function fitBounds() { // Setzen Sie einen Bereich in der Nähe der verbotenen Stadt var bounds = new SOGOU.Maps.Bounds (12955101, 4824738, 12958355, 4827449); //Set the map to display all this range //Note: instead of setting bounds to this value, adjust to the appropriate position map.fitBounds(bounds)}</script></head><body> <form id="form1" runat="server"> <input value="normal map" onclick="setMapTypeId(1)" type="button"/> <input value="Satellite Map" onclick = "setMaptypeId (2)" Typ = "Button"/> <Eingabewert = "Satelliten und Straßennetzwerk gemischte Karte" Onclick = "setMaptypeid (3)" type = "button"/> <Eingabewert = "links move" onclick = "Panby (200,0)" Typ "type ="/> <Eingabewert ". <input value = "up" onclick = "panby (0,200)" type = "button"/> <Eingabewert = "Down" onclick = "Panby (0, -200)" Typ = "Button"/> <Eingabewert = "Aufwärts" Onclick = "Panby (0, -200)" Typ "/> <Eingabewert". <input value="Tianjin" onclick="setCenter(13046000,4714250,10)" type="button"/> <input value="Forbidden City" onclick="fitBounds()" type="button"/> <div id="map_canvas" ></div> </form></body></html>Karten -Schlaganfalleigenschaften
Es ist ein sehr wichtiges Attribut auf der Karte. Das Hinzufügen von Trace -Punkten zur Karte ist ein gemeinsames Methodenattribut.
Die Sogou -API bietet zwei Arten von Strichen, um die Striche auszufüllen. Standardschläge und dynamische Additionsschläge.
Standardschläge werden hinzugefügt:
var location = new SOGOU.Maps.Point (12956000, 4824875); // Geben Sie die Punkt-Slash-Position an var map = new SOGOU.MAPS.MAP (document.getElementById ("map_canvas"), {}) an; // Initialisieren Sie den Karten var marker = new SOGOU.MAPS.MARKER ({Position: Ort, // Koordinaten -Titel zeichnen: "Punkt zeichnen", // Punktname Label zeichnenDynamische Schlaganfall
window.onload = function () { //Initialize map map = new sogou.maps.Map(document.getElementById("map_canvas"), {});//Add click event for the map sogou.maps.event.addListener(map, 'click', function (event) { var marker1 = new sogou.maps.Marker({ position: event.point, map: map }); }); }Bereichsmessung basierend auf zwei Strichpunkten
// Erhalten Sie das einzige Beispiel für die Klassenfunktion GetInstance (a) {HasownProperty ("_ Instance") || (a._instance = new a); return a._instance} // Zwei Punkte sind verbundene Funktionsleitungen (Mylatlng, MyPoint) {var konverter = getInstance (SOGOU.MAPS.CONVERTER); var distanz = konverter.distance (mylatlng, mypoint); // Zwei Punkte Link var line = new SOGOU.MAPS.POLYLINE ({Pfad: [Mylatlng, MyPoint], StrokeColor: "#ff0000", Strokeopacity: 1.0, Strokegewicht: 1, Titel: ParseInt (Distanz) + "Meter", Karte: Karte: Karte}); }Ein kleines Modul wird basierend auf den oben genannten Eigenschaften erstellt, und der dynamische Bereichscode auf der Karte lautet wie folgt:
<html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1" runat = "server"> <title> </title> <style type = "text/csS"> html {Höhe: auto;} body {height: auto; {width: 1000px; Höhe: 500px; Position: Absolute;}@media print {#map_canvas {Höhe: 950px;}} </style> <script src = "http://xiazai.Vevb.com/201409/other/api_v2.1.1.1.js" type num; var hörer; // Erhalten Sie das einzige Beispiel für die Klassenfunktion GetInstance (a) {HasownProperty ("_ Instance") || (a._instance = new a); return a._instance} window.onload = function () {// initialisieren map map = new SOGOU.Maps.map (document.getElementById ("map_canvas"), {}); } Funktion addCJ () {var myPoint; var mypoint; Num = 0; //Add a click event to the map, display the current coordinates after clicking and add click strokes Listener = sogou.maps.event.addListener(map, 'click', function (event) { if (num == 0) { mypoint = myPoint = event.point; //Get the coordinates of the click position} else { myPoint = mypoint; mypoint = event.point; //Get the coordinates of the click position} Zeilen (MyPoint, MyPoint); } function delcj () {sogou.maps.event.removelistener (Hörer)} // Zwei Punkte sind verbundene Funktionsleitungen (mylatlng, mypoint) {var konverter = getInstance (SOGOU.MAPS.CONVERTOR); var distanz = konverter.distance (mylatlng, mypoint); // Zwei Punkte sind verknüpft var line = new SOGOU.MAPS.POLYLINE ({Pfad: [Mylatlng, MyPoint], StrokeColor: "#ff0000", Strokeopacity: 1.0, Strokeweight: 1, Titel: ParseInt (Distanz) + "Meter", Karte: Karte}); Placemarker (Mylatlng, ParseInt (Entfernung)); } // Dynamisch Verfolgungspunkte hinzufügen und Tracing -Punkte basierend auf der angegebenen Koordinaten -Funktion SaPhemarker (Speicherort, jl) {var klickedLocation = locum; var marker1 = new SOGOU.MAPS.MARKER ({Position: Ort, Titel: JL+"Meter", Beschriftung: {sichtbar: true, ausgerichtet: "boden"}, map: map}); } function mapClear () {num = 0; map.clearall (); } < /script> < /head> <body> <form ID = "Form1" runat = "server"> <Eingabe type "button" value = "Bereichsmessung" onclick = "addcj ()" /> <Eingabe type "button" value = "cancel Ranging" onclick = "delcj ()" /> <Eingabe type = "button =" value "value =" clear "apclick =" mapclar () " /> <" type "divy =" value "value" divy ". id = "map_canvas"> </div> </form> </body> </html>Ich hoffe