Закрыть Привет! Если вы читаете это - Вы еще не зарегистрированы. Это займет не больше минуты. Нажмите здесь, чтобы пройти регистрацию в несколько простых шагов, чтобы пользоваться всеми возможностями нашего форума. Обратите внимание, запрещены непристойные, матерные, бессмысленные (цифры, случайный набор букв) ники. Удачи!

Тема: Наносим MapIcon на карту

Показано с 1 по 10 из 33

  1. #1
    Пользователь

    Аватар для Frapsy

    Статус: Оффлайн
    Регистрация:12.12.2011
    Сообщений:1,275
    Репутация:395 [+/-] 

    Наносим MapIcon на карту

    Не знаю, как сейчас, но раньше, многих интересовало, как на сайте нанести на карту иконки домов, бизнесов или любые другие иконки. Реализовать такую штуку можно вот таким образом.

    Также, как и в павн, чтобы нанести иконку на карту, нам необходимы ее координаты. Если брать случай с домами, то нам необходимы только X и Y координаты входа в дом.

    Для начала, нам необходима сама карта, мы будет использовать карту SA размером 1000х1000px, так как я считаю, что такой размер наиболее подходит для вставки ее на ваш сайт, но если вам плевать на удобство просмотра, берите размеры больше. Код этого урока будет заточен на то, что вы используете 1000х1000.

    Допустим, мы имеем массив с необходимыми данными, X и Y координатами, пусть он выглядит вот так:
    PHP код:
    Array
    (
        [
    0] => Array
            (
                [
    coord_x] => 1300.56
                
    [coord_y] => -50.21
            
    )

        [
    1] => Array
            (
                [
    coord_x] => -400.59
                
    [coord_y] => 700.11
            
    )

        [
    2] => Array
            (
                [
    coord_x] => 400.59
                
    [coord_y] => -220.11
            
    )


    Для примера я взял всего 3 "комплекта" координат, в реальной ситуации, например, с домами, у вас будет на много больше (я слышал, что в некоторых модах более 10к домов).

    Теперь, когда данные у нас "в руках", создадим блок, фоном которого будет наша карта.

    Код HTML:
    <div style="background:url(/images/map_1000.jpg);position:relative;width:1000px;height:1000px">
    background:url(/images/map_1000.jpg); - фон блока с указанием пути до картинки с картой SA.
    position:relative; - подробнее о position тут, relative необходимо для дальнейшего позиционирования иконок.
    width/height - ширина/высота блока

    Далее десерт, алгоритм расчета координаты иконки. Для тех, кому пофигу на пояснения, сразу код, чтобы скопировать и вставить, пояснения напишу ниже и в комментариях.
    PHP код:
    foreach($data as $val) { // 1
        
    if($val['coord_x'] > 0$left = (3000 abs($val['coord_x']))/6// 2.1
        
    else $left = (3000 abs($val['coord_x']))/6// 2.2
        
        
    if($val['coord_y'] > 0$top = (3000 abs($val['coord_y']))/6// 3.1
        
    else $top = (3000 abs($val['coord_y']))/6// 3.2
        
        
    echo '<img " src="http://wiki.sa-mp.com/wroot/images2/a/a9/Icon_31.gif" style="position:absolute;top:'.$top.'px;left:'.$left.'px;">';

    Чтобы было удобнее объяснять, я нарисовал картинку, некую модель карты SA.



    На картинке:
    h0_web/h0_pawn - точка отсчета координаты на сайте/на сервере
    h_1..4 - предполагаемые дома с их серверными координатами

    1. Проходим по массиву с координатами циклом
    2. Подсчет веб.координат Х.

    2.1. Если coord_x > 0 => иконка будет расположена в 1 или 4 четверти (тригонометрия 10кл, иконки h_1 и h_4). Чтобы сдвинуть координату X в эти четверти, необходимо к имеющейся координате coord_x прибавить 3000, этим самым, продвинув иконку на пол карты (см. картинку).

    2.2. Если coord_x < 0 => иконка расположена во 2 или 3 четверти (иконки h_2 и h_3). Для того, чтобы рассчитать расстояние, на которое необходимо сместить иконку по X, нужно из 3000 вычесть модуль coord_x, этим мы получим нужное нам смещение.

    3. Подсчет веб.координат Y.

    3.1. Тоже самое, только с другой осью. Если coord_y < 0, то иконка располагается в 3 или 4 степени (h_3 и h_4), для смещения в эти четверти необходимо к модулю coord_y прибавить 3000, тогда по оси Y иконка сдвинется в нужное место.

    3.2. Если coord_y > 0, то иконка расположена в 1 или 2 четверти (h_2 и h_1), чтобы сместить иконку в эти четверти необходимо проделать действия, почти аналогичные действиям в пункте 2.2: 3000 - coord_y, это выражение даст нам нужное смещение по Y.

    Теперь очень важный момент. Если вы смотрели код, то видели, что все смещения в конечном итоге делятся на 6, происходит это потому, что реальный размер карты SA 6000х6000px, а мы берем ее в масштабе 1:6 (1000px к 6000px), следовательно, все полученные координаты должны быть разделены на 6.

    Когда наш алгоритм закончит работу, нам необходимо дописать тэг закрытия блока </div>.

    Пример работы: http://frapsy.ru/houses

    Карты:
    Карта 1000x1000
    Карта 3000x3000
    Последний раз редактировалось Frapsy; 11.05.2014 в 22:46.
    TOPLAY- лучший мониторинг игровых серверов.
    -
    Узнать подробнее.
    Сообщество ВКонтакте.
    Перейти на мониторинг игровых серверов.
    -
    Мониторинг игровых серверов SAMP, CRMP, MTA, Minecraft.
  2. 7 пользователей сказали cпасибо Frapsy за это полезное сообщение:

    Alex Westbrook (03.11.2014), Black_Jack. (11.05.2014), brebvix (11.05.2014), Modern Rp (12.05.2014), Salvage (11.05.2014), Timur_Diez (11.08.2015), You Must Teach (10.05.2014)

  3. #2
    Пользователь

    Аватар для You Must Teach

    Статус: Оффлайн
    Регистрация:07.07.2013
    Адрес:Berlin
    Сообщений:802
    Репутация:138 [+/-] 
    Это что-то новенькое
    Allure Role Play - Новое представление в SA-MP индустрии.
    Анонс Allure Role Play.

  4. #3
    Пользователь

    Аватар для Frapsy

    Статус: Оффлайн
    Регистрация:12.12.2011
    Сообщений:1,275
    Репутация:395 [+/-] 
    Это что-то новенькое
    Новенького ничего нет, просто почему-то до меня никто не делал этого
    TOPLAY- лучший мониторинг игровых серверов.
    -
    Узнать подробнее.
    Сообщество ВКонтакте.
    Перейти на мониторинг игровых серверов.
    -
    Мониторинг игровых серверов SAMP, CRMP, MTA, Minecraft.
  5. 1 пользователь сказал cпасибо Frapsy за это полезное сообщение:

    Modern Rp (12.05.2014)

  6. #4
    Community Manager

    Аватар для Нескафеша

    Статус: Оффлайн
    Регистрация:10.01.2012
    Сообщений:2,169
    Репутация:829 [+/-] 
    Молодчина, лови жирный +

    Услуги гаранта - 100 рублей за сделку на любую сумму до 1000 рублей!(skype: neskafesha)
    Не советую покупать лицензионную GamePL
  7. #5
    Заблокирован

    Аватар для Salvage

    Статус: Оффлайн
    Регистрация:01.06.2013
    Адрес:127.0.0.1
    Сообщений:2,032
    Репутация:733 [+/-] 
    Невероятно круто,очень понравилось.
    "Спасибо"
  8. #6
    За это и + не жалко поставить. Где то использую =)
  9. #7
    Пользователь

    Аватар для thecool

    Статус: Оффлайн
    Регистрация:28.06.2011
    Сообщений:268
    Репутация:40 [+/-] 
    Новенького ничего нет, просто почему-то до меня никто не делал этого
    Ошибаетесь. На офф. форуме SA:MP уже давно (пару лет) существует тема SA:MP Online Map (онлайн карта игроков на сервере)
    Принцип работы такой же.
    Лучшая реклама/раскрутка/пиар SA:MP серверов это мониторинг САМП серверов
  10. #8
    Пользователь

    Аватар для Frapsy

    Статус: Оффлайн
    Регистрация:12.12.2011
    Сообщений:1,275
    Репутация:395 [+/-] 
    Ошибаетесь. На офф. форуме SA:MP уже давно (пару лет) существует тема SA:MP Online Map (онлайн карта игроков на сервере)
    Принцип работы такой же.
    Не видел но, посмотрю, спасибо. Кстати классная идея, сделать показ игроков сервера на карте.
    TOPLAY- лучший мониторинг игровых серверов.
    -
    Узнать подробнее.
    Сообщество ВКонтакте.
    Перейти на мониторинг игровых серверов.
    -
    Мониторинг игровых серверов SAMP, CRMP, MTA, Minecraft.
  11. #9
    Пользователь

    Аватар для kemperrr

    Статус: Оффлайн
    Регистрация:15.02.2014
    Сообщений:144
    Репутация:29 [+/-] 
    можно php файл уже готовый? А то я нубок Warning: Invalid argument supplied for foreach()
  12. #10
    можно php файл уже готовый? А то я нубок Warning: Invalid argument supplied for foreach()
    Там нечего сложного нету, mysql запрос перед этим и все.
Страница 1 из 4 123 ... Последняя
  • К странице:

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения