Este artículo describe la aplicación de la API del mapa de Sogou, que es una técnica muy práctica. Compártelo para su referencia. El método de implementación específico es el siguiente:
Inicialización del mapa
1. Agregue un archivo API que haga referencia al mapa:
<script src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js" type = "text/javascript"> </script>
2. Evento de carga de inicialización del sitio web:
Window.Onload = function () {var map = new Sogou.maps.map (document.getElementById ("map_canvas"), {});}Cree un DIV con ID map_canvas, estilo Div personalizado, y el mapa se carga automáticamente cuando se ejecuta el sitio web;
El código específico es el siguiente
<html xmlns = "http://www.w3.org/1999/xhtml"> <head runat = "servidor"> <title> </title> <style type = "text/css"> html {altura: auto;} cuerpo {altura: Auto; margin: 0; almohadilla: 0;}#map_canvas {ancho: 1000px; altura: 500px; posición: absoluto;}@medios print {#map_canvas {Height: 950px;}} </style> <script src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js" "" "" "" "" "" "" "" "" "" "" "" "" "" "" type="text/javascript"></script><script>window.onload = 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>Especificar la visualización del mapa de mocheng
El código clave es el siguiente:
Window.Onload = function () {var myOptions = {Zoom: 10, Center: new Sogou.maps.point (12956000, 4824875)}; // coordenadas de la ciudad, esta coordenada es Beijing coordenate var map = new sogou.maps.map (document.getEmementbyid ("map_canvas"), myOptions); }Comprender las propiedades del mapa
Enumere algunas propiedades de uso común, como: movimiento del mapa, conversión de tipo de mapa, saltar a las ciudades designadas
El código específico es el siguiente
<html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1" runat = "servidor"> <title> </title> <style type = "text/css"> html {altura: auto;} cuerpo {altura: auto; margen: 0; padding: 0;} {ancho: 1000px; altura: 500px; posición: absoluto;}@medios print {#map_canvas {Height: 950px;}} </style> <script src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js" type = "text/javaScript" MAP; // Crear variable global Window.Onload = function () {var myOptions = {zoom: 10, Center: new sogou.maps.point (12956000, 4824875)}; // especificar maps de la ciudad = new Sogou.maps.map (document.getElementByid ("map_canvas"), myOptions); // create map} ///ettypeid MethodeD setMapTypeId (num) {// Establecer tipo de mapa, como: //sogou.maps.maptypeid.roadmap mapa normal // sogou.maps.maptypeid.satellite mapa de satélite // sogou.maps.maptypeid.hybrid satélite y red de carreteras mixta mixta mixta mixta mixta mixta mixta mixta mixta mixta mixta MAP // MAP.SetMapTypeId (Sogou.maps.mapTypeid.Hibrid) Switch (num) {Case 1: MAP.SetMapTypeId (Sogou.Maps.MapTypeid.RoadMap); romper; // Caso de mapa normal 2: map.setMapTypeid (Sogou.maps.mapTypeid.satellite); romper; // Caso de mapa satelital 3: MAP.SetMapTypeId (Sogou.Maps.MapTypeid.Hibrid); romper; // Mapa mixto de red satelital y de carretera}} // Método de panby Map Map Motor MOVE FUNCIÓN PANBY (A, B) {MAP.PANBY (A, B)} // SETOPTION El método del método muestra la función de región especificada setOptions () {// establecer el centro de mapa, nivel y tipo map.setOptions ({Center: nuevo Sogou.Maps.Maps.Point (13522000, 3641093, 3641093, 3141093, 3141093. maptypeid: sogou.maps.maptypeid.roadmap})} // El ejemplo del método setcenter muestra que las regiones especificadas a y b son coordenadas de mapas y c son nivel de mapa de nivel setcenter (a, b, c) {map.setCenter (new sogou.maps.point (a, b), c)} // fitBounds de rango de mechón a los medios de ajuste especificados () // Establecer un rango cerca de los límites VAR de la ciudad prohibida = nuevo Sogou.Maps.Bounds (12955101, 4824738, 12958355, 4827449); // Establezca el mapa para mostrar todo este rango // Nota: en lugar de configurar los límites en este valor, ajuste a la posición apropiada map.fitBounds (límites)} </script> </head> <body> <forma id = "form1" runat = "servidor"> <valor de entrada = "mapa normal" en click = "setMapTypeid (1)" type = "booth"/> <input value = "satellite map" onClick = "setMapTypeId (2)" type = "botón"/> <input value = "satellite y red de la red de la red mapa mixto" onClick = "setmapTypeid (3)" type = "botón"/> <input value = "mude izquierdo" onclick = "panby (200,0)" type = "botón"/> <input value = "Mover a la derecha" en ondclick = "Panby (panby (panby (panby (panby (" (-200) type = "Button"/> <input value = "mudarse" onClick = "panby (0,200)" type = "botón"/> <input value = "mudando" OnClick = "panby (0, -200)" type = "botón"/> <input value = "mudarse" ondClick = "PANBY (0, -200)" Type = "Botón"/> <input value = "shanghai" type = "Botton"/> <input value = "Tianjin" onClick = "setCenter (13046000,4714250,10)" type = "botón"/> <input value = "prohibido" city "onclick =" fitBounds () "type =" botón "/> <Div id =" MAP_CANVAS "> </div> </form> </body> </html>Propiedades de trazo de mapa
Es un atributo muy importante en el mapa. Agregar puntos de seguimiento al mapa es un atributo de método común.
La API de Sogou proporciona dos tipos de golpes para llenar los trazos. Trazos predeterminados y trazos de adición dinámica.
Se agregan trazos predeterminados:
ubicación var = nueva Sogou.Maps.Point (12956000, 4824875); // Especifique la posición de punto-ceñido var map = new Sogou.maps.map (document.getElementById ("map_canvas"), {}); // Inicializar el mapa var marcador = new Sogou.maps.marker ({posición: ubicación, // Título de coordenadas de dibujo: "Punto de dibujo", // etiqueta de nombre de punto de dibujo: {Visible: true, align: "Bottom"}, // Draw Point Visualización Formulario Map: Map,}); // Addraw Point para mapAdición de trazo dinámico
Window.Onload = function () {// Inicializar mapa MAP = new Sogou.maps.map (document.getElementById ("map_canvas"), {}); // Agregar evento de clic para el map sogou.maps.event.addlistener (map, 'click', function (event) {var marker1 = new sogou.maps.marker ({{{» }); }Medición de rango basada en dos puntos de accidente cerebrovascular
// Obtenga el único ejemplo de la función de clase getInstance (a) {A.HasownProperty ("_ instancia") || (A._Instance = nuevo A); return a._instance} // Dos puntos son líneas de función conectadas (mylatlng, mypoint) {var converter = getInstance (Sogou.maps.Converter); var de var = convertidor.distance (mylatlng, mypoint); // Dos puntos Link var line = new Sogou.maps.polyline ({ruta: [mylatlng, mypoint], strokecolor: "#ff0000", strokeopacity: 1.0, strokeweight: 1, title: parseint (distancia) + "meter", mapa: map}); }Se realiza un pequeño módulo en función de las propiedades anteriores, y el código de rango dinámico en el mapa es el siguiente:
<html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1" runat = "servidor"> <title> </title> <style type = "text/css"> html {altura: auto;} cuerpo {altura: auto; margen: 0; padding: 0;} {ancho: 1000px; altura: 500px; posición: absoluto;}@medios print {#map_canvas {Height: 950px;}} </style> <script src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js" type = "text/javaScript" mapa; var num; var oyente; // Obtenga el único ejemplo de la función de clase getInstance (a) {A.HasownProperty ("_ instancia") || (A._Instance = nuevo A); return a._instance} window.Onload = function () {// Inicializar mapa MAP = new Sogou.maps.map (document.getElementById ("map_canvas"), {}); } function addCj () {var mypoint; var mypoint; num = 0; // Agregue un evento de clic al mapa, muestre las coordenadas actuales después de hacer clic y agregar clic en Strokes Listener = Sogou.maps.event.addListener (map, 'haga clic', function (event) {if (num == 0) {mypoint = mypoint = event.point; // las coordenadas de la posición de clic} más {mypoint; mypoint = event.point; ////////////1 get the coordination of thewlle posición} líneas (mypoint, mypoint); } function delcj () {sogou.maps.event.removelistener (oyente)} // dos puntos son líneas de función conectadas (mylatlng, mypoint) {var converter = getInstance (Sogou.maps.converder); var de var = convertidor.distance (mylatlng, mypoint); // Dos puntos están vinculados var línea = new Sogou.maps.polyline ({ruta: [mylatlng, mypoint], strokecolor: "#ff0000", strokeopacity: 1.0, strokeweight: 1, title: parseint (distancia) + "meter", mapa: map}); lugar de lugar (mylatlng, parseint (distancia)); } // Agregue dinámicamente puntos de rastreo y cree puntos de rastreo basados en la función de coordenadas especificadas PlacMarker (ubicación, JL) {var ClickedLocation = ubicación; var marcador1 = new Sogou.maps.marker ({posición: ubicación, título: jl+"meter", etiqueta: {visible: true, align: "fondo"}, mapa: map}); } function mapclear () {num = 0; map.clearAll (); } </script> </head> <body> <form id = "form1" runat = "servidor"> <input type = "button" value = "rango de medición" onClick = "addcj ()" /> <input type = "button" value = "cancelar ranging" onclick = "delcj ()" /> <input type = "boots" value = "oncclick =" mapcLick () ")") ")") id = "MAP_CANVAS"> </div> </form> </body> </html>Espero que este artículo sea útil para el desarrollo del mapa de Sogou de todos.