如何输入详细的多个信息窗口

时间：2017-01-01 22:20:46

标签： javascript google-maps

我正在尝试创建一个带有路径链接标记的地图..每个标记用鼠标悬停一个infowindow开口，用Click更详细一个。  更详细的将类似于 Google Maps Info Windows

我的版本有效，直到我尝试更改我目前拥有的点击信息窗口..然后它全部停止或我松散标记或折线..

我已经尝试了迄今为止我找到的所有答案，但没有成功，所以认为我还有其他错误...... 

var map;
var clicked = false;
var locations = [
  //start of locations list

  ['Sydney', -33.8688197, 151.2092955, 1, 'https://en.wikipedia.org/wiki/Sydney'],
  ['Vancouver', 49.2827291, -123.1207375, 2, 'https://en.wikipedia.org/wiki/Vancouver'],
  ['Vancouver', 49.2827291, -123.1207375, 3, 'https://en.wikipedia.org/wiki/Vancouver'],
  ['Kamloops', 50.6745220, -120.3272674, 4, 'https://en.wikipedia.org/wiki/Kamloops'],
  ['Jasper,Canada', 52.8736786, -118.0813581, 5, 'https://en.wikipedia.org/wiki/Jasper,Canada'],
  ['Banff', 51.1783629, -115.5707694, 6, 'https://en.wikipedia.org/wiki/Banff'],
  ['Lake Louise,Canada', 51.4253705, -116.1772552, 7, 'https://en.wikipedia.org/wiki/Lake Louise,Canada'],
  ['Calgary', 51.0486151, -114.0708459, 8, 'https://en.wikipedia.org/wiki/Calgary'],
  ['Canadian Rockies', 54.1521752, -120.1585339, 9, 'https://en.wikipedia.org/wiki/Canadian Rockies'],
  ['Niagara Falls', 43.0962143, -79.0377388, 10, 'https://en.wikipedia.org/wiki/Niagara Falls'],
  ['New York', 40.7127837, -74.0059413, 11, 'https://en.wikipedia.org/wiki/New York'],
  ['Rockerfeller Building', 40.7587402, -73.9786736, 12, 'https://en.wikipedia.org/wiki/Rockerfeller Building'],
  ['Statue Of Liberty', 40.6892494, -74.0445004, 13, 'https://en.wikipedia.org/wiki/Statue Of Liberty'],
  ['Empire State Building', 40.7484405, -73.9856644, 14, 'https://en.wikipedia.org/wiki/Empire State Building'],
  ['Washington D.C.', 38.9071923, -77.0368707, 15, 'https://en.wikipedia.org/wiki/Washington D.C.'],
  ['Utah', 39.3209801, -111.0937311, 16, 'https://en.wikipedia.org/wiki/Utah'],
  ['Arches National Park', 38.7330810, -109.5925139, 17, 'https://en.wikipedia.org/wiki/Arches National Park'],
  ['Las Vegas', 36.1699412, -115.1398296, 18, 'https://en.wikipedia.org/wiki/Las Vegas'],
  ['Bryce National Park', 37.5930377, -112.1870895, 19, 'https://en.wikipedia.org/wiki/Bryce National Park'],
  ['Zion national Park', 37.2982022, -113.0263005, 20, 'https://en.wikipedia.org/wiki/Zion national Park'],
  ['San Francisco', 37.7749295, -122.4194155, 21, 'https://en.wikipedia.org/wiki/San Francisco'],
  ['Alcatraz', 37.8269775, -122.4229555, 22, 'https://en.wikipedia.org/wiki/Alcatraz'],
  ['Yosemite', 37.8651011, -119.5383294, 23, 'https://en.wikipedia.org/wiki/Yosemite'],
  ['San Francisco', 37.7749295, -122.4194155, 24, 'https://en.wikipedia.org/wiki/San Francisco'],
  ['Sydney', -33.8688197, 151.2092955, 25, 'https://en.wikipedia.org/wiki/Sydney'],


  //end of locations list
];

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33.868819, 151.2092966)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
    });

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));

    google.maps.event.addListener(marker, 'mouseout', function() {
      if (!clicked) {
        infowindow.close();
      }
    });

    google.maps.event.addListener(marker, 'click', function() {
      clicked = true;
      infowindow.setContent("Coming !!");
      infowindow.open(map, this);
    });
    google.maps.event.addListener(infowindow,
      'closeclick',
      function() {
        clicked = false
      })
  }

  var lineCoordinates = locations.map(function(val) {
    return new google.maps.LatLng(val[1], val[2]);
  });

  var tripPath = new google.maps.Polyline({
    path: lineCoordinates,
    geodesic: true,
    strokeColor: '#000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  tripPath.setMap(map);
}

initialize();

Current jsfiddle version

1 个答案:

答案 0 :(得分：0)

我不完全确定我最终修复了什么......或者确切地说原件出错的地方......但我现在有一个工作版本。

所以如果其他人都在努力寻找相同想法的答案，这里有新版本的副本。

Working Fiddle 

 var map
   var clicked = false
    var locations = [
    ['Sydney', -33.8688197,   151.2092955, 1,'https://en.wikipedia.org/wiki/Sydney'],
['Vancouver', 49.2827291,   -123.1207375, 2,'https://en.wikipedia.org/wiki/Vancouver'],
['Vancouver', 49.2827291,   -123.1207375, 3,'https://en.wikipedia.org/wiki/Vancouver'],
['Kamloops', 50.6745220,   -120.3272674, 4,'https://en.wikipedia.org/wiki/Kamloops'],
['Jasper,Canada', 52.8736786,   -118.0813581, 5,'https://en.wikipedia.org/wiki/Jasper,Canada'],
['Banff', 51.1783629,   -115.5707694, 6,'https://en.wikipedia.org/wiki/Banff'],
['Lake Louise,Canada', 51.4253705,   -116.1772552, 7,'https://en.wikipedia.org/wiki/Lake Louise,Canada'],
['Calgary', 51.0486151,   -114.0708459, 8,'https://en.wikipedia.org/wiki/Calgary'],
['Canadian Rockies', 54.1521752,   -120.1585339, 9,'https://en.wikipedia.org/wiki/Canadian Rockies'],
['Niagara Falls', 43.0962143,   -79.0377388, 10,'https://en.wikipedia.org/wiki/Niagara Falls'],
['New York', 40.7127837,   -74.0059413, 11,'https://en.wikipedia.org/wiki/New York'],
['Rockerfeller Building', 40.7587402,   -73.9786736, 12,'https://en.wikipedia.org/wiki/Rockerfeller Building'],
['Statue Of Liberty', 40.6892494,   -74.0445004, 13,'https://en.wikipedia.org/wiki/Statue Of Liberty'],
['Empire State Building', 40.7484405,   -73.9856644, 14,'https://en.wikipedia.org/wiki/Empire State Building'],
['Washington D.C.', 38.9071923,   -77.0368707, 15,'https://en.wikipedia.org/wiki/Washington D.C.'],
['Utah', 39.3209801,   -111.0937311, 16,'https://en.wikipedia.org/wiki/Utah'],
['Arches National Park', 38.7330810,   -109.5925139, 17,'https://en.wikipedia.org/wiki/Arches National Park'],
['Las Vegas', 36.1699412,   -115.1398296, 18,'https://en.wikipedia.org/wiki/Las Vegas'],
['Bryce National Park', 37.5930377,   -112.1870895, 19,'https://en.wikipedia.org/wiki/Bryce National Park'],
['Zion national Park', 37.2982022,   -113.0263005, 20,'https://en.wikipedia.org/wiki/Zion national Park'],
['San Francisco', 37.7749295,   -122.4194155, 21,'https://en.wikipedia.org/wiki/San Francisco'],
['Alcatraz', 37.8269775,   -122.4229555, 22,'https://en.wikipedia.org/wiki/Alcatraz'],
['Yosemite', 37.8651011,   -119.5383294, 23,'https://en.wikipedia.org/wiki/Yosemite'],
['San Francisco', 37.7749295,   -122.4194155, 24,'https://en.wikipedia.org/wiki/San Francisco'],
['Sydney', -33.8688197,   151.2092955, 25,'https://en.wikipedia.org/wiki/Sydney'],

    ];

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 4,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

   google.maps.event.addListener(marker, 'click', (function (marker, i) {
   return function(){
    clicked = true;
    infowindow.setContent(locations[i][4]);
    infowindow.open(map, marker);
    setTimeout(function () { infowindow.close(); }, 8000);

    }
  })(marker, i));



     google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));

      google.maps.event.addListener(marker, 'mouseout', function() {
       if (!clicked) {
          infowindow.close();
        }
      });    




var lineCoordinates = locations.map(function(val) {
    return new google.maps.LatLng(val[1], val[2]);
  });

  var tripPath = new google.maps.Polyline({
    path: lineCoordinates,
    geodesic: true,
    strokeColor: '#000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  tripPath.setMap(map);
}

initialize();

我的清单上的下一步

添加“标签式”信息窗口

添加详细的信息窗口，包括图片

在灯箱类型窗口中打开infowindow链接

相关问题
最新问题