Html utf 8 maps

Создаем Вашу первую карту

Это пособие приведет Вас к созданию Вашей первой работающей карты, использующей Google Maps API. Пособие также охватывает процесс публикации карты в Сети с помощью Google Pages и настройки карты, чтобы она отображала область, выбранную Вами, с расположенными на ней маркерами и инфо-окнами.

Время изучения

Необходимые условия

  1. Настройка аккаунта на Google Pages;
  2. Получение работающей карты;
  3. Нахождение Широты/Долготы Вашей местности;
  4. Настройка карты;
  5. Подведение итогов.

Настройка аккаунта на Google Pages

Для того, чтобы опубликовать Вашу карту в Сети, будем использовать Google Pages. Также Вы можете использовать любой другой сервер для хранения своей (своих) карт. Если вы уже знакомы с Google Pages или используете свой собственный сервер, то можете смело пропускать данный параграф и переходить к следующему.

  1. Зайдите на страницу http://pages.google.com под своим GMail-логином. Если Вы впервые используете Google Pages, то Вы будете перенаправлены на страницу с описание и условиями использования сервиса. Пожалуйста, прочитайте и примите эти условия.
  2. После этого Вы увидите интерфейс, с помощью которого можно создать новую страницу. Кроме того, что Google Pages предоставляет удобный WYSIWYG HTML-редактор, вы также можете загружать готовые страницу со своего жесткого диска. Мы будем использовать опцию загрузки страниц, созданных вне Google Pages. Нас странице Edit page кликните ‘Back to Site Manager’ – появится страница Site Manager.
  3. Сейчас Вы должны увидеть интерфейс менеджера сайта. Он состоит из страниц, созданных в редакторе, который находится слева; меню загрузки страниц, которое находится справа и адреса Вашего сайта, который находится вверху страницы. Оставьте эту страницу открытой в вашем браузере – она нам еще пригодится в дальнейшем.
Читайте также:  Размеры изображения

Получаем работающую карту

  1. Для внедрения карты Google в сайт, Вы должны получить специальный API-ключ, который связан с адресом Вашего сайта и Gmail-аккаунтом. Во-первых, посетите http://www.google.com/apis/maps/signup.html. Будьте уверены в том, что правильно поняли условия использования сервиса.
  2. Введите URL своего сайта в поле ‘My Web Site URL’. Поставьте флажок в поле о том, что Вы согласны с условиями использования и нажмите кнопку ‘Generate API Key’.
  3. Теперь Вы должны увидеть страницу с благодарностью за регистрацию, на которой находятся: ваш API-ключ (длинная последовательность из произвольных символов), адрес домена, для которого полученный ключ будет верным и код простенькой карты. Вы можете видеть, что полученный ключ для API присоединяется в конец кода тэга, отвечающего за скрипт загрузки карты. Оставьте эту страницу открытой в окне браузера.
  4. Запустите текстовый редактор. Например, Блокнот. (Советую Notepad++.) Скопируйте HTML-код со страницы с ключом и вставьте в чистый документ редактора. Сохраните этот файл под названием mymap.html.
  5. Вернитесь к странице с менеджером сайта Google Pages, которую мы открыли на шаге 4 параграфа 1. Кликните по ссылке ‘upload’, находящейся внизу меню загрузки страниц. Нажмите на кнопку ‘Browse’, найдите и выберите файл mymap.html.
  6. Как только файл загрузится на сервер, Вы увидите значок корзины рядом с именем файла и размер этого файла.
  7. Пришло время протестировать Вашу карту! Щелкните по ссылке ‘mymap.html’ в меню загрузки файлов. Вы должны увидеть окно браузера, в котором будет Ваша карта. Если все шаги были выполнены правильно, то Вы увидите карту с центром в Polo Alto, California, такую же, как эта:
    http://maps.examples.googlepages.com/mymap.html.

Если Вы получили сообщение об ошибке, в котором говорится, что данный ключ зарегистрирован для другого сайта, то значит, что Вы ввели неправильный URL, когда подписывались на ключ для API. Вернитесь к шагу 2 данного параграфа и убедитесь, что Вы ввели правильный адрес сайта.Если же Вы видите просто пустую страницу, то, вероятно, произошла ошибка при копировании HTML-кода. Вернитесь к шагу 4 и убедитесь в том, что был скопирован код только из рамки.

Читайте также:  Мигающий цвет в html

Нахождение Широты/Долготы Ваше местности

Первой настройкой карты, что Вы проведете, будет смена центра карты на Ваш собственный (адрес дома, работы, города и т.п.). Чтобы это сделать, нужно знать координаты места, которое Вы хотите видеть в качестве центра карты. Процесс отыскания координат по адресу называется geocoding и происходит, когда вы вводите адрес для поиска на maps.google.com. Карты Google имеют один из лучших geocoding-движков, так что мы будем пользоваться ими для отыскания нужных координат.

  1. Зайдите на http://maps.google.com.
  2. Введите адрес вашего местоположения в поле для поиска и нажмите кнопку ‘Searh Maps’. Если Ваш адрес был найден, то на этом месте на карте появится маркер. Если же под критерии поиска попало несколько значений, движок Вас спросит о наиболее подходящем.
  3. Geocoding – процесс неточный, поэтому маркер может появиться немного не в том месте: например, посередине улицы, дороги и т.д. Все, что Вам нужно сделать, — это щелкнуть в желаемой место два раза и центр карты окажется на нем.
  4. Как только положение центра карты станет для Вас удовлетворительным, можно «забирать» координаты этого места. Для этого кликните по ссылке ‘Link To This Page’. Получите URL вида:
    http://maps.google.com/maps?f=q&hl=en&q=3650+McClintock+Ave+Los+Angeles+CA&sll=34.019963,-118.290047&sspn=0.00482,0.006856&ie=UTF8&ll=34.019968,-118.289988&spn=0.001205,0.001714&t=k&z=19&om=1.
  5. Рассмотрим это хитровыкрученный URL. Нам нужно отыскать параметр ll и скопировать два значения, идущие после него. Это и будут широта и долгота. Их нужно куда-нибудь записать. Также можно запомнить уровень зуммирования карты: за него отвечает параметр z. Внимание: для каждой зоны карты используется свой уровень детализации, который может быть нерабочим для других областей.

Настраиваем карту

  1. Итак, файл mymap.html должен быть открыт в текстовом редакторе.
  2. Добавьте следующую строчку кода, используя координаты, полученные в параграфе 3:

Метод setCenter() устанавливает центр карты с помощью класса GLatLng() , а также — уровень зуммирования. Самым маленьким значением зума карты является 0 – виден весь мир. Перезагрузите страницу на сервер и проверьте ее работоспособность.

  • Теперь мы добавим код, который меняет тип карты: нормальная карта, изображение со спутника, смешанный тип. По умолчанию стоит нормальный тип отображения. За смену типа карты отвечают три кнопочки в верхнем правом углу. На сайте http://maps.google.com можно увидеть различия между этими тремя типами. Метод, который меняет тип карты называется setMapType() , а строчка кода выглядит так и добавляется она после строчки, устанавливающей центр карты:
    map.setMapType(G_NORMAL_MAP);
    map.setMapType(G_SATELLITE_MAP);
    map.setMapType(G_HYBRID_MAP);
  • Создадим маркер в центре Вашей карты. Код, который создает маркер:

    var html= &#034
    &#034 + &#034USC GamePipe Lab
    &#034 + &#034 3650 McClintock Ave, Los Angeles CA&#034 ;
    marker.openInfoWindowHtml(html);

    Как видно из примера, в инфо-окошко можно вставить любой HTML-код. Двойные кавычки должны быть экранированы с помощью обратного слеша: «\»» . Если Вы хотите добавить в инфо-окно изображение, то скорректируйте его (изображения) размеры. Ну и отвечает за добавление инфо-окна метод openInfoWindow() .

  • Добавим элементы управления картой. Отвечает за это метод addControl() . Вот некоторые элементы, код установки которых следует добавлять где-нибудь после установки центра карты:
    map.addControl(new GSmallMapControl());
    map.addControl(new GLargeMapControl());
    map.addControl(new GSmallZoomControl());
    map.addControl(new GScaleControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GOverviewMapControl());
  • Изменив HTML-код, можно изменить размер карты. Для этого необходимо отредактировать свойства контейнера, в котором содержится карты. Например, так:

    Подведение итогов

    Поздравляем, вы прошли материал и создали свою первую карту на основе Google Maps API! Для того, чтобы сделать ее более функциональной обратитесь к документации. Если у вас есть вопросы, то задавайте их на форуме.

    Источник

    Html utf 8 maps

    JDK Tutorials — Herong’s Tutorial Examples — v6.31, by Dr. Herong Yang

    ∟ Character Set Encoding Maps — Unicode UTF-8

    This section provides a tutorial example of analyzing and printing character set encoding maps for encoding: UTF-8, the most popular encoding for Unicode character set.

    Here is the output of my sample program, EncodingAnalyzer.java, for UTF-8 encoding:

    herong> java EncodingAnalyzer.java UTF-8 Code Point > Byte Sequence - Code Point > Byte Sequence 0000 > 00 - 007F > 7F 0080 > C2 80 - 00BF > C2 BF 00C0 > C3 80 - 00FF > C3 BF 0100 > C4 80 - 013F > C4 BF . 07C0 > DF 80 - 07FF > DF BF 0800 > E0 A0 80 - 083F > E0 A0 BF 0840 > E0 A1 80 - 087F > E0 A1 BF 0880 > E0 A2 80 - 08BF > E0 A2 BF . 0FC0 > E0 BF 80 - 0FFF > E0 BF BF 1000 > E1 80 80 - 103F > E1 80 BF 1040 > E1 81 80 - 107F > E1 81 BF 1080 > E1 82 80 - 10BF > E1 82 BF . 1FC0 > E1 BF 80 - 1FFF > E1 BF BF 2000 > E2 80 80 - 203F > E2 80 BF 2040 > E2 81 80 - 207F > E2 81 BF 2080 > E2 82 80 - 20BF > E2 82 BF . 2FC0 > E2 BF 80 - 2FFF > E2 BF BF 3000 > E3 80 80 - 303F > E3 80 BF 3040 > E3 81 80 - 307F > E3 81 BF 3080 > E3 82 80 - 30BF > E3 82 BF . 3FC0 > E3 BF 80 - 3FFF > E3 BF BF 4000 > E4 80 80 - 403F > E4 80 BF 4040 > E4 81 80 - 407F > E4 81 BF 4080 > E4 82 80 - 40BF > E4 82 BF . 4FC0 > E4 BF 80 - 4FFF > E4 BF BF 5000 > E5 80 80 - 503F > E5 80 BF 5040 > E5 81 80 - 507F > E5 81 BF 5080 > E5 82 80 - 50BF > E5 82 BF . 5FC0 > E5 BF 80 - 5FFF > E5 BF BF 6000 > E6 80 80 - 603F > E6 80 BF 6040 > E6 81 80 - 607F > E6 81 BF 6080 > E6 82 80 - 60BF > E6 82 BF . 6FC0 > E6 BF 80 - 6FFF > E6 BF BF 7000 > E7 80 80 - 703F > E7 80 BF 7040 > E7 81 80 - 707F > E7 81 BF 7080 > E7 82 80 - 70BF > E7 82 BF . 7FC0 > E7 BF 80 - 7FFF > E7 BF BF 8000 > E8 80 80 - 803F > E8 80 BF 8040 > E8 81 80 - 807F > E8 81 BF 8080 > E8 82 80 - 80BF > E8 82 BF . 8FC0 > E8 BF 80 - 8FFF > E8 BF BF 9000 > E9 80 80 - 903F > E9 80 BF 9040 > E9 81 80 - 907F > E9 81 BF 9080 > E9 82 80 - 90BF > E9 82 BF . 9FC0 > E9 BF 80 - 9FFF > E9 BF BF A000 > EA 80 80 - A03F > EA 80 BF A040 > EA 81 80 - A07F > EA 81 BF A080 > EA 82 80 - A0BF > EA 82 BF . AFC0 > EA BF 80 - AFFF > EA BF BF B000 > EB 80 80 - B03F > EB 80 BF B040 > EB 81 80 - B07F > EB 81 BF B080 > EB 82 80 - B0BF > EB 82 BF . BFC0 > EB BF 80 - BFFF > EB BF BF C000 > EC 80 80 - C03F > EC 80 BF C040 > EC 81 80 - C07F > EC 81 BF C080 > EC 82 80 - C0BF > EC 82 BF . CFC0 > EC BF 80 - CFFF > EC BF BF D000 > ED 80 80 - D03F > ED 80 BF D040 > ED 81 80 - D07F > ED 81 BF D080 > ED 82 80 - D0BF > ED 82 BF . D7C0 > ED 9F 80 - D7FF > ED 9F BF D800 > 3F - DFFF > 3F E000 > EE 80 80 - E03F > EE 80 BF E040 > EE 81 80 - E07F > EE 81 BF E080 > EE 82 80 - E0BF > EE 82 BF . EFC0 > EE BF 80 - EFFF > EE BF BF F000 > EF 80 80 - F03F > EF 80 BF F040 > EF 81 80 - F07F > EF 81 BF F080 > EF 82 80 - F0BF > EF 82 BF . FFC0 > EF BF 80 - FFFF > EF BF BF

    The encoding map of UTF-8, which is the most popular encodings used for the Unicode character set, is complex:

    • The output sequence has variable number of bytes.
    • It is backward compatible with US-ASCII.
    • This map only valid for Unicode 3.0 and older versions. So it is a partial UTF-8 map.
    • One section of code points is not valid: 0xD800 — 0xDFFF.

    Источник

  • Оцените статью