Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.07.2017, 20:20
Новичок на форуме
Отправить личное сообщение для CodeMonk3y Посмотреть профиль Найти все сообщения от CodeMonk3y
 
Регистрация: 16.07.2017
Сообщений: 7

Двигающееся и масштабируемое изображение на сайте
Вот в чем проблема. Хочу сделать сайт с картой, которая будет приближаться и отдаляться при прокрутке колесика мыши и двигаться влево-вправо-вверх-вниз при движении нажатой мыши в соответствующие стороны. Причем при клике мышкой на карте по населенным пунктам, они выделяются.

Проблема возникает, во-первых, при масштабировании (приближении и отдалении карты), как его сделать? Всегда отображать одно и то же изображение при увеличении и уменьшении или отображать разные изображения (каждое для определенного масштаба)?

Во-вторых, так как мне нужно отмечать населенные пункты, на которых была нажата мышка, требуется получать координаты мыши относительно левого верхнего края изображения. Как это делать, если помещать изображение в hmtl-код через тег <img>?
Ответить с цитированием
  #2 (permalink)  
Старый 23.07.2017, 12:28
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 629

Сообщение от CodeMonk3y Посмотреть сообщение
получать координаты мыши относительно левого верхнего края изображения. Как это делать, если помещать изображение в hmtl-код через тег <img>?
Для случая, когда IMG вставлен прямо в BODY надо смотреть .offsetLeft и .offsetTop картинки и использовать для корректировки координат мыши.
Но есть ощущение, что Вы не с того начали. В целом описанная задача тянет на несколько листов описания технологии картографии. И масштабирование/перемещение картинки - это не самая большая проблема, с чем придется ещё столкнуться. Лучше использовать готовое. Тем более, что есть API.
http://map.google.com
Ответить с цитированием
  #3 (permalink)  
Старый 23.07.2017, 16:29
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 916

В современном вэбе готовых решений вагон и маленькая тележка поэтому в первую очередь стоит смотреть в сторону готовый решений и копипастить лучшее добавляя нужный тебе функционал (костыли).

Если хочешь сделать сам но при этом попроще и на готовых решениях смотри в сторону библиотеки http://leafletjs.com/index.html

Если хочешь как можно проще то смотри в сторону OSM гугла ну или на крайний случай яндекса.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как скрыть изображение на сайте? Georka Элементы интерфейса 18 06.11.2013 13:31
JS загружает изображение всегда с локального кэша - почему? buhpro Общие вопросы Javascript 4 02.10.2013 20:01
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 13:25
Ввод текста и нажатие кнопки на другом сайте автоматически Trizael Общие вопросы Javascript 3 25.04.2013 14:59
Сервисы для реализации оплаты кредитками на сайте. nyols Серверные языки и технологии 1 29.05.2011 12:44