В этой статье описывается применение API Sogou Map, которое является очень практичной техникой. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Инициализация карты
1. Добавьте файл API, который ссылается на карту:
<script src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js" type = "text/javascript"> </script>
2. Мероприятие по загрузке инициализации веб -сайта:
window.onload = function () {var map = new sogou.maps.map (document.getelementbyid ("map_canvas"), {});}Создайте div с id map_canvas, пользовательский стиль div, а карта автоматически загружается при запуске веб -сайта;
Конкретный код выглядит следующим образом
<html xmlns = "http://www.w3.org/1999/xhtml"> <head runat = "server"> <title> </title> <style type = "text/css"> html {height: auto;} body {height: auto; margin: 0; Adding: 0; {width: 1000px; высота: 500px; положение: Absolute;}@Media 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 = "CAP_C_C/" CAP_C "CAP_C/" CAP_C/"CAP_C/" CAP_C/"CAP_C/" CAP_C/"CAP_C/" CAP_CAN "> <DAP_CAN" </head> <body> <form id = "form" runat = " </form> </body> </html>Укажите отображение карты Mocheng
Ключевой код заключается в следующем:
window.onload = function () {var myoptions = {Zoom: 10, Center: new Sogou.maps.point (12956000, 4824875)}; // городские координаты, эта координата является координатой var map = new sogou.maps.map (document.getElementbyid ("map_canvas"); }Понимание свойств карты
Перечислите некоторые часто используемые свойства, такие как: Движение карты, преобразование типа карты, прыжок в назначенные города
Конкретный код выглядит следующим образом
<html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1" runat = "server"> <title> </title> <стиль типа = "text/css"> html {heesh: auto;} body {auto: auto; margin: 0; {width: 1000px; высота: 500px; положение: Absolute;}@Media print {#map_canvas {height: 950px;}} </style> <script src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js" type = "text/javascript"> </script> <script> var map; // Создать глобальную переменную window.onload = function () {var myoptions = {Zoom: 10, Center: new Sogou.maps.point (12956000, 4824875)}; // указать City Map = new sogou.maps.Map.Map.GateB myoptions); // Создать карту} // setmaptypeid Метод пример функции setmaptypeid (num) {// set map pyts, например: //sogou.maps.maptypeid.roadmap Normal Map // sogou.maps.maptypeid.satellite Satellite SetlinebeD.maptyDID.HATELITE SATELLITE SATELLITE SATELLITE SATELLITE и SOGOU.MAPS.MAPS.MAPTYPEID. map // map.setmaptypeid (sogou.maps.maptypeid.hybrid) switch (num) {case 1: map.setmaptypeid (sogou.maps.maptypeid.roadmap); перерыв; // Нормальная карта Случай 2: Map.SetMaptyPeid (sogou.maps.maptypeid.satellite); перерыв; // Спутниковая карта 3: map.setmaptypeid (sogou.maps.maptypeid.hybrid); перерыв; // Смешанная карта спутниковой и дорожной сети}} // Пример метода Panby Map Map Функция перемещения Panby (a, b) {map.panby (a, b)} // Пример метода Setoptions Отображает указанную функцию региона () {// Установить центр карты, уровень и тип карт. Setoptions ({center: new sogou.maps.maps.maps.maps.maps.maps.maps.maps.maps.maps.maps.maps.maps.maps.maps.maps.maps.maps.maps.maps.maps. maptypeid: sogou.maps.maptypeid.roadmap})} // Пример метода SetCenter показывает, что указанные области A и B являются координатами MAP, а C - функция уровня карты setCenter (a, b, c) {map.setcenter (new sogou.maps.point (a, b), c)} // fitBounds prescound gracks arcome racks. // Установите диапазон вблизи запрещенного города VAR Bounds = new Sogou.maps.bounds (12955501, 4824738, 12958355, 4827449); // Установите карту, чтобы отобразить все этот диапазон // Примечание. Вместо того, чтобы устанавливать границы к этому значению, приспособитесь к соответствующей карте положения. onclick = "setmaptypeid (2)" type = "button"/> <input value = "Спутниковая и дорожная сеть смешанная карта" onclick = "setmaptypeid (3)" type = "кнопка"/> <vint value = "Move Left" OnClick = "panby (200,0)" type = "/> <vint value =" Move right "onclick =" panby (-2) "type ="/> <input value = " type = "Кнопка"/> <input value = "Move Up" onclick = "panby (0,200)" type = "cutton"/> <input value = "Move Down" OnClick = "panby (0, -200)" type = "Кнопка"/> <input value = "opt up" onclick = "panby (0, -200)" type = "/> кнопка входного значения =" shanGATO "STACLOP" (0, -200) "type ="/> <vint value = "ShanOploping" (0, -200) " type = "кнопка"/> <input value = "tianjin" onclick = "setCenter (13046000,4714250,10)" type = "кнопка"/> <input value = "Запретный город" OnClick = "fitBounds ()" type = "/> <div id =" map_canvas "> </div> </hody> </ht> </ht> </ht> </ht> </ht>Свойства инсульта карты
Это очень важный атрибут на карте. Добавление точек трассировки к карте является общим атрибутом метода.
Sogou API предоставляет два типа ударов для заполнения ударов. По умолчанию удары и динамические удары с добавлением.
Строки по умолчанию добавлены:
var location = new sogou.maps.point (12956000, 4824875); // Укажите позицию точки склада var map = new sogou.maps.map (document.getelementbyid ("map_canvas"), {}); // Инициализировать карту var marker = new sogou.maps.marker ({position: location, // Нарисуйте координату Название: «Нарисовать точку», // Нарисовать метку имени точки: {visible: true, выравнивать: «внизу»}, // рисовать карту отображения точки: карта,}); // AddRaw to MapДинамическое дополнение к удару
window.onload = function () {// инициализировать карту map = new sogou.maps.map (document.getelementbyid ("map_canvas"), {}); // Добавить событие click для map sogou.maps.event.addlistener (map, 'click', function (event) {var marker1 = new sogou.maps.marker (aby vecoint. }); }Измерение диапазона на основе двух точек хода
// Получить единственный пример функции класса getInstance (a) {a.hashownproperty ("_ encement") || (a._instance = new a); return a._instance} // Две точки являются подключенными линиями функций (mylatlng, mypoint) {var converter = getInstance (sogou.maps.converter); var distance = converter.distance (mylatlng, mypoint); // Две точки ссылки var line = new sogou.maps.polyline ({path: [mylatlng, mypoint], strokecolor: "#ff0000", scloskopacity: 1,0, вес -вес: 1, название: parseint (расстояние) + "метр", карта: карта}); }Небольшой модуль изготовлен на основе вышеуказанных свойств, а код динамического дальности на карте выглядит следующим образом:
<html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1" runat = "server"> <title> </title> <стиль типа = "text/css"> html {heesh: auto;} body {auto: auto; margin: 0; {width: 1000px; высота: 500px; позиция: Absolute;}@Media print {#map_canvas {height: 950px;}} </style> <script src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js" typem. var map; var num; var слушатель; // Получить единственный пример функции класса getInstance (a) {a.hashownproperty ("_ encement") || (a._instance = new a); return a._instance} window.onload = function () {// инициализировать карту map = new sogou.maps.map (document.getelementbyid ("map_canvas"), {}); } функция addCj () {var myPoint; var mypoint; num = 0; // Добавить событие Click в карту, отобразите текущие координаты после щелчка и добавить Click Sulkes Slister = sogou.maps.event.addlistener (map, 'click', function (event) {if (num == 0) {mypoint = mypoint = event.point; // Получить координаты положения click {mypoint = mypoint; LINE Click} (MyPoint, MyPoint); } function delcj () {sogou.maps.event.removelistener (слушатель)} // Две точки подключены к функциям (mylatlng, mypoint) {var converter = getInstance (sogou.maps.convertor); var distance = converter.distance (mylatlng, mypoint); // две точки связаны с линией var = new sogou.maps.polyline ({path: [mylatlng, mypoint], strokecolor: "#ff0000", ScloseOpacity: 1.0, вес -вес: 1, заголовок: parseint (расстояние) + "Минтер", карта: карта}); PlaceMarker (mylatlng, parseint (расстояние)); } // Динамически добавить точки отслеживания и создавать точки отслеживания на основе указанных координат функции PlaceMarker (местоположение, JL) {var clickedLocation = location; var marker1 = new sogou.maps.marker ({положение: местоположение, заголовок: JL+"Meter", метка: {visible: true, align: "внизу"}, карта: карта}); } function mapClear () {num = 0; map.clearall (); } < /script> < /head> <body> <form id = "form1" runat = "server"> <input type = "value =" измерение диапазона "onclick =" addcj () " /> <input type =" value = "onclick" onclick = "delcj ()" /> <input = "value =" onclick = "mapCl =" /> " />" /> " /" /> "disclie id = "map_canvas"> </div> </form> </body> </html>Я надеюсь, что эта статья будет полезна для разработки карт Sogou