Este artigo descreve a aplicação da API do SOGOU MAP, que é uma técnica muito prática. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Inicialização do mapa
1. Adicione um arquivo de API que referencia o mapa:
<script src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js" type = "text/javascript"> </script>
2. Evento de carregamento de inicialização do site:
window.onload = function () {var map = new sogou.maps.map (document.getElementById ("map_canvas"), {});}Crie uma div com ID Map_Canvas, estilo DIV personalizado e o mapa é carregado automaticamente quando o site é executado;
O código específico é o seguinte
<html xmlns = "http://www.w3.org/1999/xhtml"> <head runat = "server"> <title> </title> <style type = "text/css"> html {altura: auto;} corpo {altura: margin; 0; 0; {largura: 1000px; altura: 500px; posição: absoluto;}@mídia impressa {#map_canvas {altura: 950px;}} </style> <script src = "http://xiazai.vevb.com/201409/other/api_v2.5.2.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 = "servidor" ">" </morm> </body> </html>Especifique a exibição do mapa de Mocheng
O código -chave é o seguinte:
window.onload = function () {var myoptions = {zoom: 10, centro: new sogou.maps.point (12956000, 4824875)}; // coordenadas da cidade, essa coordenada é a beijing coordenada var map = new sogou.maps.map (document.MementByIdIdIdIdIs; }Entendendo as propriedades do mapa
Liste algumas propriedades comumente usadas, como: movimento do mapa, conversão do tipo de mapa, salto para cidades designadas
O código específico é o seguinte
<html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1" runat = "server"> <title> </title> <style type = "text/css"> html {altura: auto;} {0: {largura: 1000px; altura: 500px; posição: absoluto;}@mídia impressa {#map_canvas {altura: 950px;}} </style> <script src = "http://xiazai.vevb.com/209/othript/apti_vp.2.JS") map; // crie variável global window.onload = function () {var myoptions = {zoom: 10, centro: new sogou.maps.point (12956000, 4824875)}; // especificar mapa da cidade = new sogou.maps.map (documentElementByid ("}} setMapTypeid (num) {// Definir tipo de mapa, como: //sogou.maps.maptypeid.roadmap mapa normal // SOGOU.MAPS.MAPTYPEID.SATELLITE Satellite mapa // SOGOU.MAPS.MAPTYPEID.HBrid Satellite e mixada map // map.setMapTypeId (sogou.maps.maptypeid.hybrid) switch (num) {case 1: map.setMapTypeid (sogou.maps.maptypeid.roadmap); quebrar; // Caso normal do mapa 2: map.setMaPtypeID (SOGOU.MAPS.MAPTYPEID.SATELLITE); quebrar; // Caso do mapa de satélite 3: map.setMapTypeid (SOGOU.MAPS.MAPTYPEID.HYBRID); quebrar; // mapa misto de rede de satélite e rede rodoviária}} // Método Panby Exemplo de mapa Mova manualmente a função panby (a, b) {map.panby (a, b)} // Método das setipoções Exemplo exibe a região especificada setOptions () {// Definir o MAP Center, Nível e Tipo Map.setOptions ({Center: Sogou.Mops.Mops.Mops. MapTypeID: SOGOU.MAPS.MAPTYPEID.ROADMAP})} // Método SetCenter Exemplo mostra que as regiões especificadas a e B são coordenadas de mapa e C são o nível de mapa SetCenter (a, b, c) {map.SetCenter (sogou.MAPS.POTS (A, B), C)}} // Defina uma faixa perto da cidade proibida var Bounds = new Sogou.maps.bounds (12955101, 4824738, 12958355, 4827449); // Defina o mapa para exibir todo esse intervalo // Nota: Em vez de definir limites para esse valor, ajuste para o mapa de posição apropriado.FitBounds (Bounds)} </script> </ad Head> <body> <formig id = "form1" runat = "servidor"> <buter value = "normal" onclick = "settypeid (1)" tipe ONCLICK = "SetMapTypeid (2)" type = "Button"/> <insput value = "Satellite e rede mista de rede rodoviária" onclick = "setMapTypeid (3)" tipo = "botão"/> <inspum Value = "Mover esquerda" Oclick = "Panby (2000)" Type = "Button"/> < type = "Button"/> <Valor de entrada = "ROVE" ONCLICK = "PANBY (0,200)" TIPO = "BOTTON"/> <Valor de entrada = "Mover Down" OnClick = "Panby (0, -200)" Tipo = "Button"/> <Input Value = "ROVE" ONCLICK = "Panby (0, --200)" Typen "/> <butão" "" ONCLICK = "SetOptions ()" type = "Button"/> <Valor de entrada = "Tianjin" OnClick = "SetCenter (13046000.4714250,10)" tipo = "Button"/> <Buttle Value = "Cidade Forbidden" OnClick = "Fitbounds ()" Type = "Buttão"/> <botes = <ids = " </morm> </body> </html>Propriedades do Stroke de mapa
É um atributo muito importante no mapa. Adicionar pontos de rastreamento ao mapa é um atributo de método comum.
A API SOGOU fornece dois tipos de traços para preencher os golpes. Traços padrão e traços dinâmicos de adição.
Os golpes padrão são adicionados:
var location = new Sogou.maps.point (12956000, 4824875); // Especifique a posição de ponto de ponta var map = new sogou.maps.map (document.getElementById ("map_canvas"), {}); // Inicialize o mapa var marker = new sogou.maps.marker ({Position: location, // desenhar título de coordenadas: "Draw Point", // desenhar nomes de ponto Rótulo: {visível: true, alinhe: "Bottom"}, // desenho o mapa de formulário de exibição de ponto:}); // addraw Point para mapearAdição de derrame dinâmico
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 }); }); }Medição de alcance com base em dois pontos de AVC
// Obtenha o único exemplo da função de classe getInstance (a) {a.hasownproperty ("_ instância") || (a._instance = novo a); retornar a._instance} // dois pontos são linhas de função conectadas (mylatlng, myPoint) {var converter = getInstance (sogou.maps.converter); var distance = converter.distance (mylatlng, myPoint); // Link de dois pontos var linha = new sogou.maps.polyLine ({Path: [mylatlng, mypoint], Strokecolor: "#ff0000", Strokepacity: 1.0, Strokeweight: 1, título: parseInt (distância) + "medidor", mapa: mapa}); }Um pequeno módulo é feito com base nas propriedades acima, e o código dinâmico de alcance no mapa é o seguinte:
<html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1" runat = "server"> <title> </title> <style type = "text/css"> html {altura: auto;} {0: {largura: 1000px; altura: 500px; posição: absoluto;}@mídia impressa {#map_canvas {altura: 950px;}} </style> <script src = "http://xiazai.vevb.com/209/othript/apti_vp.2.JS") mapa; var num; var ouvinte; // Obtenha o único exemplo da função de classe getInstance (a) {a.hasownproperty ("_ instância") || (a._instance = novo a); return a._instance} window.onload = function () {// inicialize mapa mapa = new sogou.maps.map (document.getElementById ("map_canvas"), {}); } função addcj () {var myPoint; var myPoint; num = 0; // Adicione um evento de clique no mapa, exiba as coordenadas atuais depois de clicar e adicione o clique do ouvinte = SOGOU.MAPS.EVENT.AddListener (map, 'click', function (event) {if (num == 0) {mypoint = myPoint = event.point; // obtém o mycordinates da posição de cliques} {MyPoint; Posição} linhas (MyPoint, MyPoint); } function DELCJ () {SOGOU.MAPS.EVENT.Removelistener (ouvinte)} // Dois pontos são linhas de função conectadas (mylatlng, mypoint) {var converter = getInstance (SOGOU.MAPS.CONVERTOR); var distance = converter.distance (mylatlng, myPoint); // Dois pontos estão vinculados var linha = new Sogou.maps.polyLine ({Path: [MyLatlng, MyPoint], Strokecolor: "#FF0000", Strokepacity: 1.0, Strokeweight: 1, título: parseInt (distância) + "metro", mapa: mapa}); placemarker (mylatlng, parseint (distância)); } // Adicione dinamicamente os pontos de rastreamento e crie pontos de rastreamento com base nas coordenadas especificadas da função placemarker (location, jl) {var clickedLocation = Location; var marker1 = new sogou.maps.marker ({Position: Local, título: JL+"Meter", Label: {visível: true, alinhe: "Bottom"}, mapa: map}); } função mapClear () {num = 0; map.clearall (); } < /script> </ad Head> <body> <formig id = "form1" runat = "server"> <input type = "button" value = "medição do intervalo" onclick = "addcj ()" /> <input type = "buttle" "cancelada" onclick = "delcj ()" /> <input "" "" id = "map_canvas"> </div> </morm> </body> </html>Espero que este artigo seja útil para o desenvolvimento do mapa Sogou de todos