Два раза в месяц мы возвращаемся к любимым постам наших читателей на протяжении всей истории Activetuts +. Этот учебник был впервые опубликован в мае 2009 года.
В этом уроке мы увидим, как мы можем создать карту во Flash, используя API Google Map. Мы рассмотрим некоторые из основ, таких как увеличение масштаба карты и добавление некоторых элементов управления. Мы также рассмотрим, как мы можем добавить маркеры на нашу карту и как мы можем загружать данные, используя файл XML.
Шаг 1. Ключ API Google Map
Прежде чем мы сможем начать создавать нашу карту во Flash, нам нужно настроить несколько вещей. Для использования Google Map API вам потребуется личный ключ API. Чтобы получить это, перейдите на страницу http://code.google.com/intl/nl/apis/maps/documentation/flash/ и нажмите ссылку в правой части страницы «Зарегистрироваться для получения ключа API Карт Google».
Шаг 2: Зарегистрируйтесь
Нажав на ссылку «Зарегистрироваться для ключа API Карт Google», вы попадете на следующую страницу, где мы сможем создать наш личный ключ API. Прокрутите страницу вниз, согласитесь с положениями и условиями (вы также можете прочитать их, если вы действительно заинтересованы) и добавить URL-адрес веб-сайта, на котором вы хотите использовать приложение (вам понадобится отдельный ключ API для каждого домена, где Вы хотите разместить карту). После этого нажмите «Создать ключ API».
Шаг 3: сохрани!
Теперь вы увидите свой личный ключ API для выбранного домена. Скопируйте ключ API и вставьте или сохраните его где-нибудь, так как он понадобится нам очень скоро.
Шаг 4. Компонент Google Map SWC
Хорошо, теперь у нас есть API Key, но нам еще нужно еще кое-что, прежде чем мы сможем начать создавать нашу карту во Flash. Нам нужно скачать компонент Google Map SWC. Для этого перейдите на страницу http://code.google.com/intl/nl/apis/maps/documentation/flash/ и нажмите «Загрузить API Карт Google для Flash SDK». Появится всплывающее окно, выберите Сохранить файл «sdk.zip» и загрузить его.
Шаг 5. Установите компонент SDK.
Теперь нам нужно установить компонент SDK, чтобы использовать его во Flash. Для этого перейдите в папку, в которой вы сохранили Google Maps API для Flash SDK, и найдите версию библиотеки интерфейсов не Flex. В моем случае это (lib / map_1_9.swc). Теперь скопируйте файл «map_1_9.swc».
Шаг 6: Папки
После этого, если у вас открыт Flash, выйдите из приложения и найдите эту папку:
- (Windows) C: \ Program Files \ Adobe \ Adobe Flash CS3 (или ваша версия Flash) \ en (или ваш язык) \ Configuration \ Components
- (Mac OS X) Macintosh HD / Приложения / Adobe Flash CS3 (или ваша версия Flash) / Конфигурация / Компоненты
Внутри этой папки создайте новую папку с именем «google» и вставьте в нее файл «map_1_9.swc». Flash теперь настроен для поддержки API Карт Google для Flash.
Шаг 7: Новый файл ActionScript 3.0
Ok. Это все сделано и запылено! Теперь мы можем наконец начать создавать нашу карту во Flash. Запустите Flash CS3 или CS4 и создайте новый файл ActionScript 3.0 с размером сцены по умолчанию (550 x 400).
Шаг 8: сохрани!
Теперь просто сохраните файл; нажмите «Ctrl + S» или выберите «Файл»> «Сохранить» в меню. Сохраните его в нужном месте и назовите как хотите. Я назову это «google_map».
Шаг 9: GoogleMapsLibrary
Откройте панель «Компоненты» «Ctrl + F7» или нажмите «Окно»> «Компоненты» в меню и перетащите библиотеку GoogleMaps на сцену.
Шаг 10: Уровень действий
Создайте новый слой, дважды щелкните его имя и переименуйте его в «actions».
Шаг 11: Импорт ..
Теперь с выбранным слоем действий откройте панель действий, нажав «F9» или нажав «Окно»> «Действия». Добавьте эти строки кода:
|
1
2
3
4
|
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
|
Шаг 12: Создайте карту
Теперь давайте добавим карту! Когда мы загружаем фильм, этот фрагмент кода создаст карту и установит ее на сцене. Внутри кода мы видим переменную «map.key»; здесь мы должны добавить наш личный ключ API. Откройте файл, в котором вы сохранили ключ API, и скопируйте / вставьте его в переменную.
|
1
2
3
4
5
|
// Create The Map
var map:Map = new Map();
map.key = «Your API Key here»;
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
this.addChild(map);
|
Шаг 13: Тестируй фильм
Хорошо, теперь идите и проверьте свой фильм «Ctrl + Enter» или нажмите «Управление»> «Тестировать ролик» в меню, и вы увидите, что вы только что создали карту.
Шаг 14: Управление
На этом этапе мы можем только перетащить карту. Это не совсем то, что мы ищем, поэтому давайте добавим некоторые элементы управления на карту, которые позволят нам масштабировать и перемещаться. Чтобы добавить элементы управления на нашу карту, нам нужно обновить наш код. Для начала нам нужно вызвать несколько дополнительных классов:
|
1
2
3
|
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;
|
После этого нам нужно создать новую функцию для вызова после создания карты. Мы называем эту функцию «onMapReady ()». Внутри этой функции мы добавляем наши элементы управления на карту.
|
1
2
3
4
5
|
function onMapReady(event:MapEvent):void {
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
}
|
Теперь нам просто нужно вызывать функцию onMapReady () всякий раз, когда загружается наша карта. Для этого нам нужно добавить дополнительную строку в наш первый кусок кода.
|
1
|
map.addEventListener(MapEvent.MAP_READY, onMapReady);
|
Наш полный код теперь выглядит так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;
// Create The Map
var map:Map = new Map();
map.key = «Your API Key Here»;
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);
function onMapReady(event:MapEvent):void {
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
}
|
Шаг 15: Больше ..
Теперь протестируйте ваш фильм «Ctrl + Enter» или нажмите Control> Test Movie в меню, и вы увидите, что наша карта теперь имеет элементы управления. Мы можем увеличить и даже изменить нашу карту на спутниковую, гибридную и рельефную. Это очень круто, но мы хотим больше ..
Шаг 16: Широта и Долгота
Давайте приблизимся к определенному месту, как только наша карта загрузится в первый раз. Скажем, я серфер и хочу создать карту мест для серфинга в моем родном городе. Мы не хотим, чтобы люди вручную увеличивали масштаб и искали область, поэтому мы исправим это через секунду. Единственное, что мы должны добавить — это небольшая строка кода в нашей функции onMapReady ().
|
1
|
map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);
|
На самом деле мы создаем новую точку LatLng на карте. Сначала мы указываем 2 значения: «широта» и «долгота» нашего региона. Затем мы устанавливаем значение масштабирования; Я решил использовать 9. Масштаб варьируется от 0 до 16 (это может варьироваться от региона к региону). Наконец, мы устанавливаем тип карты; Я выбрал здесь HYBRID_MAP_TYPE.
Наша функция onMapReady () теперь выглядит так:
|
1
2
3
4
5
6
|
function onMapReady(event:MapEvent):void {
map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
}
|
Если мы проверим наш фильм, вы увидите, что многое изменилось. Как только карта загружена, мы увеличиваем наш конкретный регион, и наш тип карты теперь Hybrid. Чтобы определить широту и долготу вашего региона, вы можете использовать Google Планета Земля или онлайн-инструмент, например http://itouchmap.com/latlong.html .
Шаг 17: Добавьте маркер
Теперь давайте добавим простой маркер на нашу карту. Просто добавьте еще 2 класса:
|
1
2
|
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Marker;
|
и обновите функцию «onMapReady ()» следующим фрагментом кода:
|
1
2
3
4
|
var marker:Marker = new Marker(
new LatLng(28.74659, -13.93447)
);
map.addOverlay(marker);
|
Снова мы создаем точку LatLng с некоторыми конкретными значениями широты / долготы для нашего местоположения. Затем мы вызываем «addOverlay ()», чтобы поместить наш маркер на карту. Наш полный код теперь выглядит так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Marker;
// Create The Map
var map:Map = new Map();
map.key = «ABQIAAAAUeTGkbea0ftVnzbVMwAPKxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTlsMw9FdPd5mJqEw01CzwnlVdxDw»;
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);
function onMapReady(event:MapEvent):void {
map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
var marker:Marker = new Marker(
new LatLng(28.74659, -13.93447)
);
map.addOverlay(marker);
}
|
Иди и проверь свой фильм. Вы увидите наш маркер на карте.
Шаг 18: еще больше ..
Теперь давайте перейдем на следующий уровень. У нас есть карта с элементами управления масштабированием и маркером. Что еще нам нужно? Ну, я скажу тебе. Нам нужны БОЛЬШЕ МАРКЕРОВ, ИНСТРУМЕНТОВ, ИНФОРМАЦИОННЫХ ОКН, и мы хотим загрузить все из файла XML. Итак, начнем. Сначала мы создадим наш XML-файл. Откройте ваш любимый редактор XML и создайте этот файл:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<?xml version=»1.0″ encoding=»utf-8″?>
<map_xml>
<location>
<lat>28.74659</lat>
<lon>-13.93447</lon>
<name_tip>Majanicho</name_tip>
<title_tip><![CDATA[Majanicho]]></title_tip>
<content_tip><![CDATA[Majanicho is a very good surf spot for longboarding it offers very long rides.]]></content_tip>
</location>
<location>
<lat>28.738764</lat>
<lon>-13.955126</lon>
<name_tip>Derecha de los Alemanes</name_tip>
<title_tip><![CDATA[La Derecha de los Alemanes]]></title_tip>
<content_tip><![CDATA[La Derecha de los Alemanes is another very good spot for longboarders but shortboarders will have some epic days out here to.]]></content_tip>
</location>
<location>
<lat>28.741022</lat>
<lon>-13.951821</lon>
<name_tip>The Bubbel</name_tip>
<title_tip><![CDATA[The Bubbel aka La Derecha]]></title_tip>
<content_tip><![CDATA[The Bubbel is one of the most famouse waves in Fuerteventura its a really hollow reef break and it has some epic barrels on offer.]]></content_tip>
</location>
</map_xml>
|
Шаг 19: onMapReady ()
Как только наша карта загружена, нам нужно вставить данные XML в наш файл Flash. Создайте новую функцию с именем «xmlLoader ()», и мы вызовем эту функцию в нашей функции «onMapReady ()». Сначала нам нужно удалить код, который мы добавили, чтобы создать маркер всего за несколько шагов до этого. Затем мы добавим строку для вызова функции «xmlLoader ()». Наша функция onMapReady () теперь должна выглядеть так:
|
1
2
3
4
5
6
7
|
function onMapReady(event:MapEvent):void {
map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
xmlLoader();
}
|
Далее мы хотим создать функцию «xmlLoader ()».
|
1
2
3
|
function xmlLoader(){
}
|
На следующем этапе мы заполним его.
Шаг 20. Загрузите XML
Хорошо, вот и мы. Давайте загрузим наши данные XML. Внутри функции «xmlLoader ()» мы добавляем этот код:
|
1
2
3
4
5
6
7
8
|
function loadXML(e:Event):void{
XML.ignoreWhitespace = true;
var map_xml:XML = new XML(e.target.data);
}// end of loadXML function
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, loadXML);
xmlLoader.load(new URLRequest(«xml.xml»));
|
Это позволит нам работать с нашими данными XML.
Шаг 21: Цикл по местам
Поскольку у нас есть 3 местоположения в нашем XML-файле, нам нужно создать цикл «For» и сохранить все данные в некоторых массивах. Внутри нашей функции loadXML () мы добавляем этот фрагмент кода для создания цикла For:
|
1
2
3
4
|
for (var i:Number = 0; i < map_xml.location.length(); i++){
trace(map_xml.location[i].title_tip);
}// end of for loop
|
Чтобы проверить, работает ли что-то для нас, мы проследим переменную title_tip. Протестируйте свой фильм, и вы должны получить следующий вывод:
Шаг 22: Переменные
Затем мы должны создать некоторые переменные для хранения наших данных, загруженных из файла XML. Внутри нашего цикла For мы добавляем эти переменные:
|
1
2
3
4
|
var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);
var tip = map_xml.location[i].name_tip;
var myTitle:String = map_xml.location[i].title_tip;
var myContent:String = map_xml.location[i].content_tip;
|
Если вы хотите, вы можете удалить строку «trace ()», которую мы использовали ранее. Наш цикл For теперь выглядит так:
|
1
2
3
4
5
6
7
|
for (var i:Number = 0; i < map_xml.location.length(); i++){
var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);
var tip = map_xml.location[i].name_tip;
var myTitle:String = map_xml.location[i].title_tip;
var myContent:String = map_xml.location[i].content_tip;
}// end of for loop
|
Шаг 23: Дополнительные маркеры.
Ok! Нам нужно добавить маркер на карту для каждого из наших трех мест. Теперь, когда у нас есть все данные, хранящиеся в наших переменных, нам нужно создать новую функцию с именем «createMarker ()». Внутри нашей функции loadXML () мы добавляем эту новую функцию:
|
01
02
03
04
05
06
07
08
09
10
11
|
// Add Markers On The Map
function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker {
var i:Marker = new Marker(
latlng,
new MarkerOptions({
hasShadow: true,
tooltip: «»+tip
})
);
return i;
}// end function createMarker
|
Нам все еще нужно вызвать эту функцию «createMarker ()», чтобы увидеть наши маркеры на карте. Для этого нам нужно добавить дополнительную строку кода в конце нашего цикла For:
|
1
|
map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent));
|
Вот как должна выглядеть наша функция loadXML ():
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
function loadXML(e:Event):void{
XML.ignoreWhitespace = true;
var map_xml:XML = new XML(e.target.data);
for (var i:Number = 0; i < map_xml.location.length(); i++){
var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);
var tip = map_xml.location[i].name_tip;
var myTitle:String = map_xml.location[i].title_tip;
var myContent:String = map_xml.location[i].content_tip;
map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent));
}// end of for loop
// Add Markers On The Map
function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker {
var i:Marker = new Marker(
latlng,
new MarkerOptions({
hasShadow: true,
tooltip: «»+tip
})
);
return i;
}// end function createMarker
}// end of loadXML function
|
Проверьте свой фильм, и вы увидите маркеры на карте! Обратите внимание, что наши 3 точки очень близки друг к другу, поэтому вы можете немного увеличить их, чтобы увидеть их более четко.
Шаг 24: Информационные окна
Наконец нам нужно добавить немного информации для Windows. Если мы нажмем на маркеры, то получим информацию об их местонахождении. Для этого нам нужно добавить еще 2 класса:
|
1
2
|
import com.google.maps.InfoWindowOptions;
import com.google.maps.MapMouseEvent;
|
… немного больше кода для нашей функции «createMarker ()» ..
|
1
2
3
4
5
6
7
8
|
i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void
{
map.openInfoWindow(event.latLng, new InfoWindowOptions({
titleHTML: «»+myTitle,
contentHTML: «»+myContent
}));
});
|
Теперь протестируйте свой фильм, и вы увидите, что наши маркеры теперь кликабельны и что они создают информационное окно с текстом из файла XML.
Вывод
Это оно! Взгляните на наш окончательный код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Marker;
import com.google.maps.InfoWindowOptions;
import com.google.maps.MapMouseEvent;
// Create The Map
var map:Map = new Map();
map.key = «Your API Key Here»;
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);
function onMapReady(event:MapEvent):void {
map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
xmlLoader();
}
function xmlLoader(){
function loadXML(e:Event):void{
XML.ignoreWhitespace = true;
var map_xml:XML = new XML(e.target.data);
for (var i:Number = 0; i < map_xml.location.length(); i++){
var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);
var tip = map_xml.location[i].name_tip;
var myTitle:String = map_xml.location[i].title_tip;
var myContent:String = map_xml.location[i].content_tip;
map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent));
}// end of for loop
// Add Markers On The Map
function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker {
var i:Marker = new Marker(
latlng,
new MarkerOptions({
hasShadow: true,
tooltip: «»+tip
})
);
i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void
{
map.openInfoWindow(event.latLng, new InfoWindowOptions({
titleHTML: «»+myTitle,
contentHTML: «»+myContent
}));
});
return i;
}// end function createMarker
}// end of loadXML function
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, loadXML);
xmlLoader.load(new URLRequest(«xml.xml»));
}
|
Проверьте свой фильм Ctrl + Enter, чтобы проверить результат. У вас будет собственная флэш-карта на основе xml! Вы можете использовать его на своем веб-сайте, редактировать местоположения по своему усмотрению, решать только вам. Продолжайте и экспериментируйте, если у вас есть интересные результаты, обязательно поделитесь ими с нами.
Надеюсь, вам понравился этот урок, спасибо за чтение!