Cet article décrit l'application de l'API SOGOU MAP, qui est une technique très pratique. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Initialisation de la carte
1. Ajouter un fichier API qui fait référence à la carte:
<script src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js" type = "text / javascript"> </ script>
2. Événement de chargement d'initialisation du site Web:
window.onload = function () {var map = new sogou.maps.map (document.getElementyid ("map_canvas"), {});}Créez un div avec id map_canvas, un style div personnalisé et la carte est automatiquement chargée lorsque le site Web s'exécute;
Le code spécifique est le suivant
<html xmlns = "http://www.w3.org/1999/xhtml"> <head runat = "server"> <title> </ title> <style type = "text / css"> html {height: auto;} body {hauteur: auto; margin: 0;} # # # map_canvas {width: 1000px; hauteur: 500px; position: absolue;} @ media print {#map_canvas {height: 950px;}} </ style> <script src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js" type = "text / javascript"> </ script> <cript> window.onload = function () {var map = new sogou.maps.map (document.getElementById ("map_canvas"), {});} </ script> </ head> <body> <form id = "Form1" runat = "Server"> <v id = "Map_Canvas"> </ Divat> "Server"> <v = "Map_Canvas"> </ form> </body> </html>Spécifiez l'affichage de la carte Mocheng
Le code clé est le suivant:
window.onLoad = function () {var myoptions = {zoom: 10, centre: new sogou.maps.point (12956000, 4824875)}; // City Coordonnées, cette coordonnée est Beijing Coordate }Comprendre les propriétés de la carte
Énumérez certaines propriétés couramment utilisées telles que: Mouvement de la carte, conversion de type de carte, saut en villes désignées
Le code spécifique est le suivant
<html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <style type="text/css">html {height: auto;}body {height: auto;margin: 0;padding: 0;}#map_canvas {largeur: 1000px; hauteur: 500px; position: absolue;} @ media print {#map_canvas {height: 950px;}} </ style> <script src = "http://xiazai.vevb.com/201409/other/API_V2.5.1.js" type = "Text / javascrip map; // créer une fenêtre de variable globale.onLoad = function () {var myoptions = {zoom: 10, centre: new sogou.maps.point (12956000, 4824875)}; // spécifie la ville de la ville = new sogou.maps.map (document.getelementByid ("mapyvas"), myoptions); // créer Exemple de fonction setMapTypeid (num) {// définir le type de carte, tel que: //sogou.maps.maptypeid.Roadmap Normal Map // Sogou.Maps.Maptypeid.Satellite Satellite Map // Sogou.Maps.Maptypeid.Satellite Satellite et le réseau routier mixtes map // map.setmapTypeid (sogou.maps.maptypeid.hybrid) commutateur (num) {cas 1: map.setmaptypeid (sogou.maps.maptypeid.roadmap); casser; // Case de carte normale 2: map.setmapTypeid (sogou.maps.maptypeid.satellite); casser; // Case de carte satellite 3: map.setmaptypeid (sogou.maps.maptypeid.hybrid); casser; // carte mixte du réseau de satellite et du réseau routier}} // j'exemple de méthode Panby mappe manuellement déplacer la fonction panby (a, b) {map.panby (a, b)} // l'exemple de méthode setOptions affiche la fonction de région spécifiée setOptions () {// définir le centre de carte, le niveau, et le type map.SetOptions ({Center: New Sogou. 12, mapTypeid: sogou.maps.maptypeid.roadmap})} // l'exemple de méthode setCenter montre que les régions spécifiées a et b sont des coordonnées de carte et C sont la fonction de niveau de carte SetCenter (a, b), c)} //setcent {// Définissez une plage près de la ville interdite Var Bounds = new Sogou.Maps.bounds (12955101, 4824738, 12958355, 4827449); // Définissez la carte pour afficher toute cette plage // Remarque: Au lieu de définir des limites sur cette valeur, ajustez à la position de position appropriée. onclick = "setMapTypeid (2)" type = "bouton" /> <input value = "Satellite and Road Network Mety Map" onClick = "setMapTypeid (3)" type = "Button" /> <Input Value = "Move Left" OnClick = "Panby (200,0)" Type = "Button" /> <entrée = "Move droite" OnClick = "Panby (-200,0) <input value = "Move up" onClick = "Panby (0,200)" type = "bouton" /> <input value = "se déplacer" onclick = "Panby (0, -200)" type = "bouton" /> <input value = "Mov up" onClick = "Panby (0, -200)" type = "bouton" /> <entrée = "Shanghai" OnClick = "SetOptions") <input value = "tianjin" onclick = "setCenter (13046000,4714250,10)" type = "Button" /> <input value = "Forbidden City" onClick = "fitBounds ()" type = "Button" /> <div id = "Map_canvas"> </v> </ form> </odody> </html>Propriétés de la carte de course
C'est un attribut très important sur la carte. L'ajout de points de trace à la carte est un attribut de méthode commun.
L'API SOGOU fournit deux types d'accidents vasculaires cérébraux pour remplir les coups. Des traits par défaut et des traits d'addition dynamiques.
Des coups par défaut sont ajoutés:
Var Location = new Sogou.Maps.point (12956000, 4824875); // Spécifiez la position ponctuelle var map = new Sogou.maps.map (document.getElementById ("map_canvas"), {}); // Initialize the map var marqueer = new sogou.maps.marker ({position: emplacement, // dessiner le titre de coordonnée: "point de dessin", // étiquette de nom de point de dessin: {visible: true, align: "bottAjout de course dynamique
window.onload = function () {// initialize map map = new sogou.maps.map (document.getElementByid ("map_canvas"), {}); // ajouter un événement cliquez pour la carte SOGOU.MAPS.EVENT.ADDLISTENER (MAP, 'CLICK', FONCTION (événement) {Var Marker1 = new Sogou.Maps.Marker. }); }Mesure de la plage basée sur deux points de course
// Obtenez le seul exemple de la fonction de classe getInstance (a) {a.hasownproperty ("_ instance") || (a._instance = new a); return a._instance} // deux points sont des lignes de fonction connectées (mylatlng, mypoint) {var converter = getInstance (sogou.maps.converter); Var Distance = Converter.Distance (mylatlng, mypoint); // Link à deux points var line = new sogou.maps.polyline ({path: [mylatlng, mypoint], strokeColor: "# ff0000", TRAVOPACITAL: 1.0, TRALWEMPLE: 1, titre: parseInt (distance) + "mètre", map: map}); }Sur la base des attributs ci-dessus, un petit module est fabriqué et le code de tâtonnement dynamique sur la carte est le suivant:
<html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <style type="text/css">html {height: auto;}body {height: auto;margin: 0;padding: 0;}#map_canvas {largeur: 1000px; hauteur: 500px; position: absolue;} @ media print {#map_canvas {height: 950px;}} </ style> <script src = "http://xiazai.vevb.com/201409/other/API_V2.5.1.js" type = "Text / javascrip map; var num; var écouteur; // Obtenez le seul exemple de la fonction de classe getInstance (a) {a.hasownproperty ("_ instance") || (a._instance = new a); return a._instance} window.onload = function () {// initialiser map map = new sogou.maps.map (document.getElementyid ("map_canvas"), {}); } fonction addcj () {var mypoint; var mypoint; num = 0; // Ajoutez un événement de clic à la carte, affichez les coordonnées actuelles après avoir cliqué et ajoutez Click Strokes écouteur = SOGOU.MAPS.Event.AddListener (map, 'click', fonction (événement) {if (num == 0) {MyPoint = MyPoint = event.point; // Obtenez les coordonnées de la position de clic {MyPoint = MyPoint; MyPoint = event.point; position} lignes (mypoint, mypoint); } fonction delcj () {sogou.maps.event.removeListener (écouteur)} // deux points sont des lignes de fonction connectées (mylatlng, mypoint) {var converter = getInstance (sogou.maps.convertor); Var Distance = Converter.Distance (mylatlng, mypoint); // Deux points sont liés var line = new sogou.maps.polyline ({path: [mylatlng, mypoint], strokeColor: "# ff0000", TRAVOPACITALY: 1.0, tramweight: 1, titre: parseint (distance) + "mètre", map: map}); PaceMarker (mylatlng, parseInt (distance)); } // Ajouter dynamiquement des points de traçage et créer des points de traçage basés sur les coordonnées spécifiées Function PlaceMarker (Location, JL) {var ClickEdLocation = Location; var marker1 = new sogou.maps.marker ({position: emplacement, titre: jl + "mètre", étiquette: {visible: true, align: "inférieur"}, map: map}); } fonction mapclear () {num = 0; map.clearall (); } </ script> </ head> <body> <form id = "form1" runat = "server"> <input type = "button" value = "range meection" onclick = "addcj ()" /> <input type = "Button" value = "annuler" onclick = "delcj ()" /> <entrée type = "bouton" value = "clear" onclick = "MapClEAR ()" id = "map_canvas"> </ div> </ form> </ body> </html>J'espère que cet article sera utile au développement de la carte Sogou de tous