Как интегрировать пару таблиц слияния с GroundOverlays из файла KML? Обновлено с моей попыткой решить (неудачно) - PullRequest
Новая
       40

Как интегрировать пару таблиц слияния с GroundOverlays из файла KML? Обновлено с моей попыткой решить (неудачно)

0 голосов
/ 12 марта 2012

Краткая версия моего вопроса:
Как интегрировать пару таблиц слияния Карт Google (полигоны и маркеры) с GroundOverlays из файла KML? Все кликабельно.

Справочная информация: Я работаю над проектом интерактивного отображения истории, который использует 2 слоя таблиц слияния (один слой - полигоны, другой - маркеры местоположения).

Я также хочу наложить старые карты через GroundOverlay - что в настоящее время невозможно для таблиц слияния - и поэтому я экспериментировал с GroundOverlay в файле KML.

Я усложнил это, добавив слушателей на обеих страницах для управления окнами кликов.

У меня есть две веб-страницы:
1. таблицы слияния и
2. Наземные накладки КМЛ,
оба работают нормально.

Что я хочу сделать, это объединить их в одну страницу. Я не программист и не достаточно хорошо понимаю JS, чтобы это произошло.

Используемые сценарии были адаптированы из примеров, найденных в Интернете.

Вот моя первая рабочая страница:
http://wendysmithtoronto.com/mapping/townofyork-fusiontables2.html

Там вы найдете ссылку на вторую страницу.

Ваша помощь будет принята с благодарностью. Спасибо. Венди

Обновление:

Вот мои попытки объединить два набора данных:

http://wendysmithtoronto.com/mapping/townofyork-merged.html

Я пытался сделать это, добавив кусочки скрипта со страницы kmlmaps на страницу fusiontables, но, очевидно, я не расставил все по местам. Или мне не хватает знаков препинания (или смешивания различных типов сценариев, или?)

Появляется карта с правильно отображаемыми полигонами и маркерами. Но теперь (1) значки таблицы слияния не активируются, и (2) карты истории не отображаются. Тем не менее, флажки Fusion Table (в синей таблице) работают.

Я недостаточно хорошо понимаю JS, чтобы понять это.

Оба набора элементов управления на двух страницах находятся здесь (в синих и серых полях, чуть выше карты). Каждый набор элементов управления (слушателей и блоков щелчков) прекрасно работал на своей собственной веб-странице, но теперь работают только элементы управления таблицами слияния.

Эрик, спасибо, что взглянули на это! (Я только что нашел ваш ответ. Я ждал уведомления об ответе, но не проверял правильное место.)

Ура, Венди

1 Ответ

1 голос
/ 16 марта 2012

В вашем html-файле были значительные ошибки в частях JavaScript.Вы действительно должны изучить тот же базовый javascript и, в частности, использовать JS с API GMap.

Вы создали 2 объекта глобальной карты.Вы не инкапсулировали все свои карты и создания слоев в своей функции инициализации ().Все создание карты и слоя должно выполняться внутри функции инициализации (при загрузке тела).Вы должны установить глобальные переменные вне вашей функции инициализации, например, карты, всех слоев и т. Д. Наконец, вам не удалось вызвать layer.setMap(map) на 2 ваших слоях KML.

Несмотря на все это, я исправил ваш файл, действительнопросто переставляя вещи.Это просто раздел, который я должен был исправить.Переместил все в инициализацию () 

     function showbuildings(buildingcheck) {
    if (buildingcheck.checked == true)
      {
        campusmap.setMap(map);
      } else {
        campusmap.setMap(null);
      }
  }


  function showphilpotts(philpottscheck) {
    if (philpottscheck.checked == true)
      {
        philpotts.setMap(map);        
      } else {
        philpotts.setMap(null);
      }
  }



  function showbeartrail(beartrailcheck) {
    if (beartrailcheck.checked == true)
      {
        beartrail.setMap(map);        
      } else {
        beartrail.setMap(null);
      }
  }


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

function openIW(FTevent) {
  // infoWindow.setContent(FTevent.infoWindowHtml);
  // infoWindow.setPosition(FTevent.latLng);
  infoWindow.setOptions(
    { 
     content: FTevent.infoWindowHtml,
     position: FTevent.latLng,
     pixelOffset: FTevent.pixelOffset
    });
  infoWindow.open(map);
}

// Globals
//Begin map parameters
var map;
var layer_2;
var layer_1;
var tableid_1 = 2920040;  // polygons
var tableid_2 = 3189980;  // houses
var zoom = 12;
var center = new google.maps.LatLng(43.652417455515476, -79.37926607055226);

var campusmap;
var philpotts;
var beartrail;

function initialize() {

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: center,
    zoom: zoom,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
   //End map parameters

    campusmap = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1851mapshoreline.kml',  {preserveViewport:true, suppressInfoWindows:true});
    campusmap.setMap(map);

    google.maps.event.addListener(campusmap, 'click', function(kmlEvent) {
      document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description;
    });         

   philpotts = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1818maplieutphilpottsd.kml', {preserveViewport:true, suppressInfoWindows:true}); 
  google.maps.event.addListener(philpotts, 'click', function(kmlEvent) {
    document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description;
   });    
    philpotts.setMap(map);

    beartrail = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1842map-jamescaneb.kml', {preserveViewport:true, suppressInfoWindows:true}); 
  google.maps.event.addListener(beartrail, 'click', function(kmlEvent) {
    document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description;
  }); 
   beartrail.setMap(map);

layer_2 = new google.maps.FusionTablesLayer({
  suppressInfoWindows:true,
  query: {
    select: 'Location',
    from: '3189980'
  },
styles: [
  {where: "'style' = 14", markerOptions:{ iconName:"star"}},
  {where: "'style' = 13", markerOptions:{ iconName:"wht_pushpin"}},
  {where: "'style' = 11", markerOptions:{iconName:"red_blank"}}, //town houses
  {where: "'style' = 12", markerOptions:{ iconName:"orange_blank"}}, //country homes


  {where: "'style' = 15", markerOptions:{ iconName:"target"}},
  ]});
layer_1 = new google.maps.FusionTablesLayer({
  suppressInfoWindows:true,
  query: {
    select: 'Location',
    from: '2920040'
  }}),

 google.maps.event.addListener(layer_1, "click", openIW);
 google.maps.event.addListener(layer_2, "click", openIW);
 google.maps.event.addListener(map, "click", function() { infoWindow.close();});

layer_1.setMap(map);
layer_2.setMap(map);

} // end initialize
...