1

Подскажите, как при помощи jQuery можно организовать Интерактивную карту.
Есть карта, на которой точками отмечены города, необходимо, чтобы точки являлись линками и при нажатии происходила переадресация на страницу города.

Я прочитал в Интернете, что это делают как-то при помощи SVG, но не понял как именно и что нужно сделать с этим SVG, а нужно толком объяснить дизайнеру.

0

3 ответа 3

3

Есть несколько вариантов:

  • Использовать Google Map Api для построения карт, подвязывается jQuery легко. Маркеры линии, интерактивность объектов
  • У Yahoo , openstreetmaps и Yandex так же есть свои библиотеки построения карт
  • Использовать OpenLayers. Это js библиотека включающая в себя поддержку прорисовки карт и на google и на yahoo и на openstreetmaps
  • И последнее, если нужно поднять небольшой сервис карты, можно использовать jQuery плагин. Рассмотрен пример построения интерактивной карты мира.

jQuery подвязывается под все варианты

ВОТ мой пример карты города на Google Maps Api и jQuery

5
  • Может я не понятно объяснил, но карта вот в таком виде должна быть img812.imageshack.us/img812/7798/mapu.jpg, и нужно сделать на ней каким-то образом точки ссылками. Мне не нужно реальную карту.
    – Shamanis
    1 авг 2012 в 5:34
  • ссылка битая. Тогда выбирайте между veselov.sumy.ua/460-interaktivnaya-karta-na-jquery.html глядите DEMO или этим codenet.ru/webmast/js/world-map-jquery-rus
    – Anovoselof
    1 авг 2012 в 5:39
  • 2
    А еще тэг map в html5 не отменили. Попробуйте его заюзать :D
    – neoascetic
    1 авг 2012 в 5:43
  • Пожалуй использую HTML5, в данном случае это самый удобный вариант. Спасибо!
    – Shamanis
    1 авг 2012 в 7:19
  • 1
    @Shamanis image map не html5, это вообще из бородатого 3.2 :D Я сказал, что в html5 его не отменили, потому что в 5ом некоторые теги убрали из спецификации
    – neoascetic
    1 авг 2012 в 7:26
1

Я бы посоветовал юзать Leaflet. Очень симпотичная библиотека, недавно вышла новая версия. Возможность подключения тайлов из разных источников, в т. ч. из Google Maps.

OpenLayers, конечно, хорош, но я бы его выбрал для более емких задач, потому как это целый фреймворк с кучей фишек. Как прослойка м/у jQuery и OpenLayers есть еще MapQuery, но за качество не скажу, не юзал


В контексте того, что топикстартеру "[...] нужно сделать на ней каким-то образом точки ссылками [...] не нужно реальную карту", вырисовываются следующие варианты:

  • бородатый image map - вероятно, с позиции семантики это будет наилучший вариант

  • тупо div с картой бэкграундом с абсолютно позиционированными точками-ссылками на города

1

Как например:

$('svg a').on('click', function(e){
  e.preventDefault();
  
  var $this = $(this),
      path = $this.find('path'),
      title = path.attr('title'),
      city = $('#city');
  
  city.html(title);
  
  if(!$this.hasClass('active')){
    $this.addClass('active').siblings().removeClass('active');
  }else {
    $this.removeClass('active');
  }
  
  
})
body {
  background: #3f3f4f;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

svg {
  width: 100%;
  height: 100%;
}

svg a {
  cursor: pointer;
}

svg a.active path {
  fill: #1ec41e;
}

#city {
  max-width: 300px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 30px;
  text-transform: uppercase;
  background: #fff;
  color: #3f3f4f;
  font-weight: bold;
  font-family: monospace;
  text-align: center;
  font-size: 25px;
  line-height: 30px;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<div id="city">Magdagascar</div>  

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 1800">
	<defs>
		<style type="text/css">
			.land
			{
				fill: #CCCCCC;
				fill-opacity: 1;
				stroke:#3f3f4f;
				stroke-opacity: 1;
				stroke-width:0.5;
			}
		</style>
	</defs>
	<g>
		<a xlink:href="#"><path id="MG-FI-VF" title="Vatovavy-Fitovinany" class="land" d="M592.93,970.91L543.45,947.72L534.24,973.04L501.16,974.56L482.84,987.22L464.95,1037.28L451.18,1161.58L422.27,1177.92L512.3,1227.93L592.93,970.91z"/></a>
		<a xlink:href="#"><path id="MG-AV-VA" title="Vakinankaratra" class="land" d="M511.51,874.37L477.34,853.91L480.09,823.28L467.7,823.28L452.56,842.23L405.75,832.03L368.58,853.91L323.15,856.83L284.28,857.8L281.68,908.04L323.31,931.54L331.32,923.33L338.83,945.85L365.22,953.41L401.06,952.07L442.67,927.57L494.2,930.55L508.71,897.86L511.51,874.37z"/></a>
		<a xlink:href="#"><path id="MG-MA-SF" title="Sofia" class="land" d="M645.75,254.06L631.89,248.16L616.07,259.72L582.6,240.24L566.57,245.51L545.15,233.49L552.35,216.62L528.62,239.11L524.8,268.81L516.43,241.65L519,258.26L502.23,257.2L492.41,282.51L498.06,300.01L503.66,293.77L517.08,296.15L526.64,303.37L527.06,315.52L521.76,302.47L516.49,312.42L502.92,296.13L462.32,357.66L472.14,324.9L464.2,308.08L421.46,367.45L441.18,392.73L431.54,396.26L436.04,460.75L452.56,493.71L516.07,518.4L522.66,488.48L557.05,487.04L593.96,512.86L600.6,546.51L625.96,537.18L659.18,487.35L635.6,472.11L648.44,397.83L636.89,386.55L674.73,372.95L685.99,341.01L699.49,338.72L678.38,287.84L645.75,254.06z"/></a>
		<a xlink:href="#"><path id="MG-AS-SV" title="Sava" class="land" d="M759.12,450.27L770.28,456.14L782,437.89L799.75,374.11L768.04,317.07L760.69,207.36L738.63,122.71L704.94,82.22L678.33,112.36L687.96,122.25L674.2,159.01L681.08,181.66L671.44,222.76L645.75,254.06L678.38,287.84L699.49,338.72L749.2,365.09L759.12,450.27z"/></a>
		<a xlink:href="#"><path id="MG-TL-ME" title="Menabe" class="land" d="M258.7,722.57L199.63,711.31L175.45,732.44L207.33,833.4L176.79,841.05L115.51,822.16L138.37,861.51L126.4,895.35L137.72,920.15L74.83,1025.3L65.07,1065.5L35.34,1075.54L75.4,1141.73L121.97,1140.32L151.87,1130.06L167.59,1071.22L202,1081.57L258.45,1035.8L282.4,1030.73L281.68,908.04L284.28,857.8L284.36,832.16L250.73,796.58L264.63,752.05L258.7,722.57z"/></a>
		<a xlink:href="#"><path id="MG-MA-ME" title="Melaky" class="land" d="M182.11,483.38L134.51,481.84L132.97,539.66L78.24,629.87L115.51,822.16L176.79,841.05L207.33,833.4L175.45,732.44L199.63,711.31L258.7,722.57L284.34,716.13L302.13,667.43L291.49,623.18L259.82,623.18L250.19,571.3L197.87,519.55L182.11,483.38z"/></a>
		<a xlink:href="#"><path id="MG-AV-IT" title="Itasy" class="land" d="M429.67,774.59L378.22,772.34L323.15,856.83L368.58,853.91L405.75,832.03L452.56,842.23L467.7,823.28L448.97,781.03L429.67,774.59z"/></a>
		<a xlink:href="#"><path id="MG-FI-HO" title="Ihorombe" class="land" d="M414.01,1189.82L364.45,1182.38L349.31,1146.73L330.03,1136.35L252.13,1117.74L221.01,1146.43L230.46,1174.52L196.22,1260.91L205.29,1281.43L234.95,1289.91L241.17,1259.44L304.93,1238.43L356.85,1298.16L358.83,1354.49L397.49,1349.78L396.11,1276.33L437.41,1288.3L414.01,1189.82z"/></a>
		<a xlink:href="#"><path id="MG-FI-HM" title="Haute Matsiatra" class="land" d="M464.95,1037.28L438.79,1025.49L398.87,1044.65L369.96,1009.29L352.06,1009.29L281,1043.21L252.13,1117.74L330.03,1136.35L349.31,1146.73L364.45,1182.38L414.01,1189.82L422.27,1177.92L451.18,1161.58L464.95,1037.28z"/></a>
		<a xlink:href="#"><path id="MG-AS-DI" title="Diana" class="land" d="M560.78,147.32L545.95,148.71L549.89,164.1L565.45,164.12L560.78,147.32zM663.67,0L629.14,60.3L605.43,55.24L630.19,97.67L610.94,162.22L591.69,169.18L578.21,159.58L583.91,177.69L561.84,180.58L554.92,209.87L532.72,177.3L514.69,187.01L513.26,214.89L528.62,239.11L552.35,216.62L545.15,233.49L566.57,245.51L582.6,240.24L616.07,259.72L631.89,248.16L645.75,254.06L671.44,222.76L681.08,181.66L674.2,159.01L687.96,122.25L678.33,112.36L704.94,82.22L694.37,48.85L660.34,31.3L664.09,22.09L676.09,28.61L663.67,0z"/></a>
		<a xlink:href="#"><path id="MG-AV-BO" title="Bongolava" class="land" d="M370.35,659.82L324.76,675.65L302.13,667.43L284.34,716.13L258.7,722.57L264.63,752.05L250.73,796.58L284.36,832.16L284.28,857.8L323.15,856.83L378.22,772.34L429.67,774.59L383.47,704.81L370.35,659.82z"/></a>
		<a xlink:href="#"><path id="MG-MA-BO" title="Boeny" class="land" d="M431.54,396.26L410.73,408.02L423.53,382.3L409.77,368L341.99,417.21L338.28,438.4L356.94,454.51L341.81,456.85L321.28,425.61L307.16,435.72L312.69,443.68L268.16,437.04L262.8,465.12L258.18,452.95L237.23,456.46L228.27,472.26L224.81,450.76L182.11,483.38L197.87,519.55L250.19,571.3L306.63,572.74L331.41,601.55L369.96,568.42L382.85,529.23L449.8,536.78L436.04,512.37L452.56,493.71L436.04,460.75L431.54,396.26z"/></a>
		<a xlink:href="#"><path id="MG-MA-BE" title="Betsiboka" class="land" d="M516.07,518.4L452.56,493.71L436.04,512.37L449.8,536.78L382.85,529.23L369.96,568.42L331.41,601.55L306.63,572.74L250.19,571.3L259.82,623.18L291.49,623.18L302.13,667.43L324.76,675.65L370.35,659.82L403.35,657.25L420.32,672.2L447.84,660.84L482.42,683.21L514.53,677.77L547.64,592.88L516.07,518.4z"/></a>
		<a xlink:href="#"><path id="MG-TM-AI" title="Atsinanana" class="land" d="M592.93,970.91L683.54,707.12L687.3,633.18L671.44,634.73L667.31,652.06L621.88,660.73L597.1,675.19L615,707.04L587.47,718.63L583.34,734.58L598.48,823.28L568.2,849.53L558.56,897.75L532.4,888.97L508.71,897.86L494.2,930.55L490.4,963.23L501.16,974.56L534.24,973.04L543.45,947.72L592.93,970.91z"/></a>
		<a xlink:href="#"><path id="MG-FI-AA" title="Atsimo-Atsinanana" class="land" d="M512.3,1227.93L422.27,1177.92L414.01,1189.82L437.41,1288.3L396.11,1276.33L397.49,1349.78L358.83,1354.49L351.19,1373.26L400.2,1410.25L404.56,1430.05L428.75,1393.84L462.36,1410.98L512.3,1227.93z"/></a>
		<a xlink:href="#"><path id="MG-TL-AF" title="Atsimo-Andrefana" class="land" d="M281,1043.21L282.4,1030.73L258.45,1035.8L202,1081.57L167.59,1071.22L151.87,1130.06L121.97,1140.32L75.4,1141.73L35.34,1075.54L0.25,1187.41L15.45,1257.42L59.41,1331.6L44.41,1367.35L49.7,1436.3L76.67,1470.61L88.81,1516.6L130.15,1539.56L118.22,1535.35L126.25,1547.9L165.62,1553.59L205.45,1503L220.59,1395.63L248.12,1382.07L246.75,1345.98L226.1,1347.48L234.95,1289.91L205.29,1281.43L196.22,1260.91L230.46,1174.52L221.01,1146.43L252.13,1117.74L281,1043.21z"/></a>
		<a xlink:href="#"><path id="MG-TL-AY" title="Anosy" class="land" d="M358.83,1354.49L356.85,1298.16L304.93,1238.43L241.17,1259.44L234.95,1289.91L226.1,1347.48L246.75,1345.98L248.12,1382.07L252.48,1397.07L288.73,1408.49L299.75,1511.39L331.54,1540.78L390.02,1535.35L429.18,1508.77L462.36,1410.98L428.75,1393.84L404.56,1430.05L400.2,1410.25L351.19,1373.26L358.83,1354.49z"/></a>
		<a xlink:href="#"><path id="MG-TL-AD" title="Androy" class="land" d="M213.41,1589.49L257.21,1584.79L331.54,1540.78L299.75,1511.39L288.73,1408.49L252.48,1397.07L248.12,1382.07L220.59,1395.63L205.45,1503L165.62,1553.59L213.41,1589.49z"/></a>
		<a xlink:href="#"><path id="MG-TM-AN" title="Analanjirofo" class="land" d="M699.49,338.72L685.99,341.01L674.73,372.95L636.89,386.55L648.44,397.83L635.6,472.11L659.18,487.35L625.96,537.18L620.8,617.11L605.36,639.06L621.88,660.73L667.31,652.06L671.44,634.73L687.3,633.18L682.5,606.71L700.56,563.96L727.45,554.26L714.76,545.82L729.95,510.33L728.04,483.72L710.17,465.59L713.98,396.29L734.13,393.51L759.12,450.27L749.2,365.09L699.49,338.72z"/></a>
		<a xlink:href="#"><path id="MG-AV-AG" title="Analamanga" class="land" d="M514.53,677.77L482.42,683.21L447.84,660.84L420.32,672.2L403.35,657.25L370.35,659.82L383.47,704.81L429.67,774.59L448.97,781.03L467.7,823.28L480.09,823.28L477.34,853.91L511.51,874.37L528.91,730.52L514.53,677.77z"/></a>
		<a xlink:href="#"><path id="MG-FI-AM" title="Amoron'i Mania" class="land" d="M494.2,930.55L442.67,927.57L401.06,952.07L365.22,953.41L338.83,945.85L331.32,923.33L323.31,931.54L281.68,908.04L282.4,1030.73L281,1043.21L352.06,1009.29L369.96,1009.29L398.87,1044.65L438.79,1025.49L464.95,1037.28L482.84,987.22L501.16,974.56L490.4,963.23L494.2,930.55z"/></a>
		<a xlink:href="#"><path id="MG-TM-AO" title="Alaotra-Mangoro" class="land" d="M625.96,537.18L600.6,546.51L593.96,512.86L557.05,487.04L522.66,488.48L516.07,518.4L547.64,592.88L514.53,677.77L528.91,730.52L511.51,874.37L508.71,897.86L532.4,888.97L558.56,897.75L568.2,849.53L598.48,823.28L583.34,734.58L587.47,718.63L615,707.04L597.1,675.19L621.88,660.73L605.36,639.06L620.8,617.11L625.96,537.18z"/></a>
	</g>
</svg>
  
  

Пример карты РФ на codepen

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.