Question

//data structure below 
 var GPSData = [
    {
      media_name: "Ladybower.gpx",
      url: "https://firebasestorage.googleapis.com/v0/b/ibikeride-38825.appspot.com/o/GPS%2F1693%2FLadybower.gpx?alt=media&token=3f0e6a6a-51b4-4e03-a1ad-6244a7a0d8c1"
    },
    {
    media_name: "Linnet_Clough_.gpx",
    url: "https://firebasestorage.googleapis.com/v0/b/ibikeride-38825.appspot.com/o/GPS%2F1693%2FLinnet_Clough_.gpx?alt=media&token=df99a825-ad91-4e56-a11e-eb37b25aa819"
    }
]
  
// the loop to iterate over data above

let i;

 map = []
 ctaLayer = []
  for (i = 0; i < GPSData.length; i++) { 
        let htmlGPS = ""
        htmlGPS = `<div id="${GPSData[i].media_name}" class="mapNOs" style="width: 100%; height: 300px;"> </div>`
      const foosGPS = document.querySelector('.foosGPS')
      foosGPS.innerHTML += htmlGPS      
      map[i] = new google.maps.Map(document.getElementById(GPSData[i].media_name),{
              zoom: 11,
              center: {lat: 53.801277, lng: -1.548567}
            });
      ctaLayer[i] = new google.maps.KmlLayer({
                url: GPSData[i].url,
                map: map[i]
              });
   
  console.log('map', map[i], 'ctaLayer', ctaLayer[i])
}

<div class="foosGPS"></div> 

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZfMZulsytsTJzb3HRqIq9OT1ZqOuJNWA"></script>

Итак, сначала я начну с конечной точки того, каким должен быть пользовательский опыт, когда я в конечном итоге пойму это правильно. У меня есть веб-сайт, посвященный горным велосипедам, на котором есть страницы со списком маршрутов, на которых можно кататься. На странице списка областей они могут перейти на вкладку GPS, и она должна открывать строку за строкой список карт Google KML, показывающий x количество карт маршрутов для горных велосипедов, перечисленных одна за другой, которые они видят при прокрутке страницы.

В настоящее время они видят одно поле с картой и 1 пустое поле, где должна быть другая карта.

Я нахожу множество статей о том, как получить несколько карт на одном и том же просмотре карты, то есть несколько KML позже в один и тот же просмотр карты, но мало того, как сделать их уникальными, просматриваемыми один за другим.

Здесь есть одна статья Как отображать несколько карт Google на странице с API V3 , который дал Надеюсь, но, похоже, он работает по принципу, что уникальный идентификатор нескольких div на странице жестко закодирован в HTML, или вы динамически создаете идентификаторы div. Но в моем примере проблема заключается в том, что имя переменной для карты должно быть Dynami c, и я не могу понять, как это сгенерировать.

Использование Firestore У меня есть коллекция «GPS» ' в котором хранятся отдельные документы, содержащие ссылку на URL-адрес KML.

Итак, я получаю два документа из коллекции Firestore и храню их в виде массива, который затем могу oop. В этом примере он находит два документа и по мере прохождения каждого из них, а затем с помощью Dynami c HTML обновляет DOM и теоретически должен добавить поверх Google Maps с помощью файлов KML.

В На самом деле он показывает две строки, но показывает только одну карту в конце второй строки. Я думаю, что изо всех сил пытаюсь использовать массив для создания уникальных имен переменных для var = map.

Любые идеи или предложения приветствуются. Я добавил фрагмент кода, чтобы вы могли запустить его и посмотреть. Я занимался кодированием в течение короткого периода, но мне это нравится. Этот вызов поставил меня в тупик. Фрагмент прикреплен

Console.log следующим образом:

DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
mapcopy.js:47 map ni {gm_bindings_: {…}, __gm: Dg, gm_accessors_: {…}, zoom: 11, center: _.L, …}center: _.L {lat: ƒ, lng: ƒ}controls: (14) [empty, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie]data: Mf {gm_accessors_: {…}, map: ni, gm_bindings_: {…}, i: tf, j: vf, …}features: {}gm_accessors_: {zoom: null, center: null, mapTypeId: null, streetView: null, bounds: {…}, …}gm_bindings_: {controlSize: {…}, reportErrorControl: {…}, zoom: {…}, center: {…}, mapTypeId: {…}, …}i: undefinedmapTypeId: "roadmap"mapTypes: {gm_accessors_: {…}, roadmap: fv, gm_bindings_: {…}, satellite: fv, hybrid: fv, …}overlayMapTypes: _.Ie {i: Array(0), gm_accessors_: {…}, length: 0, gm_bindings_: {…}, __e3_: {…}}streetView: Bg {__gm: {…}, W: null, i: _.Pe, H: null, o: null, …}tilesloading: truetilt: 0tosUrl: "https://www.google.com/intl/en-GB_US/help/terms_maps.html"zoom: 3__e3_: {center_changed: {…}, zoom_changed: {…}, projection_changed: {…}, tilt_changed: {…}, heading_changed: {…}, …}__gm: Dg {Na: div#Ladybower.gpx.mapNOs, i: Promise, j: _.Pe, ka: _.Je, copyrights: _.Ie, …}__proto__: Object ctaLayer hg {gm_accessors_: {…}, url: "https://firebasestorage.googleapis.com/v0/b/ibiker…=media&token=3f0e6a6a-51b4-4e03-a1ad-6244a7a0d8c1", gm_bindings_: {…}, map: ni}$: falseH: i8 {i: _.Zf, j: Vd, gm_accessors_: {…}, gm_bindings_: {…}}T: Vd {j: _.Hs, o: "click", T: 0, id: 148, i: ƒ}defaultViewport: _.Id {Ya: Hd, Ua: Dd}gm_accessors_: {url: null, map: null, status: null, defaultViewport: null, metadata: null}gm_bindings_: {url: {…}, map: {…}, status: {…}, defaultViewport: {…}, metadata: {…}, …}i: []j: []ka: "https://firebasestorage.googleapis.com/v0/b/ibikeride-38825.appspot.com/o/GPS%2F1693%2FLadybower.gpx?alt=media&token=3f0e6a6a-51b4-4e03-a1ad-6244a7a0d8c1"map: ni {gm_bindings_: {…}, __gm: Dg, gm_accessors_: {…}, zoom: 3, center: _.L, …}metadata: {name: "", description: "", snippet: "", author: {…}, hasScreenOverlays: false}o: _.Hs {parameters: {…}, data: _.Je, layerId: "kml:cXOw0bjKUSqLpJ-PU5ay2LvzGlCqf8RDGf0mvwElV57DL-…dK4rUK6Mr8nAXLg5AnBiSEShUABJd1wqAgQuQ-OpLTDgU9ywI", Ch: true, zIndex: 0, …}screenOverlays_changed: ƒ ()status: "OK"ta: ni {gm_bindings_: {…}, __gm: Dg, gm_accessors_: {…}, zoom: 3, center: _.L, …}ua: {ks: "ts:53094984", kv: "3", api: "3", client: "2"}url: "https://firebasestorage.googleapis.com/v0/b/ibikeride-38825.appspot.com/o/GPS%2F1693%2FLadybower.gpx?alt=media&token=3f0e6a6a-51b4-4e03-a1ad-6244a7a0d8c1"__e3_: {click: {…}, clickable_changed: {…}}__proto__: Object
mapcopy.js:47 map ni {gm_bindings_: {…}, __gm: Dg, gm_accessors_: {…}, zoom: 11, center: _.L, …}center: _.L {lat: ƒ, lng: ƒ}controls: (14) [empty, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie, _.Ie]data: Mf {gm_accessors_: {…}, map: ni, gm_bindings_: {…}, i: tf, j: vf, …}features: {}gm_accessors_: {zoom: null, center: null, mapTypeId: null, streetView: null, bounds: {…}, …}gm_bindings_: {controlSize: {…}, reportErrorControl: {…}, zoom: {…}, center: {…}, mapTypeId: {…}, …}i: undefinedmapDataProviders: "Map data ©2020"mapTypeId: "roadmap"mapTypes: {gm_accessors_: {…}, roadmap: fv, gm_bindings_: {…}, satellite: fv, hybrid: fv, …}mapUrl: "https://maps.google.com/maps?ll=53.391408,-2.015239&z=13&t=m&hl=en-GB&gl=US&mapclient=apiv3"overlayMapTypes: _.Ie {i: Array(0), gm_accessors_: {…}, length: 0, gm_bindings_: {…}, __e3_: {…}}rmiUrl: "https://www.google.com/maps/@53.3914077,-2.0152385,13z/data=!10m1!1e1!12b1?source=apiv3&rapsrc=apiv3"streetView: Bg {__gm: {…}, W: null, i: _.Pe, H: null, o: null, …}tilesloading: falsetilt: 0tosUrl: "https://www.google.com/intl/en-GB_US/help/terms_maps.html"zoom: 13__e3_: {center_changed: {…}, zoom_changed: {…}, projection_changed: {…}, tilt_changed: {…}, heading_changed: {…}, …}__gm: Dg {Na: div#Linnet_Clough_.gpx.mapNOs, i: Promise, j: _.Pe, ka: _.Je, copyrights: _.Ie, …}__proto__: Object ctaLayer hg {gm_accessors_: {…}, url: "https://firebasestorage.googleapis.com/v0/b/ibiker…=media&token=df99a825-ad91-4e56-a11e-eb37b25aa819", gm_bindings_: {…}, map: ni}$: falseH: i8 {i: _.Zf, j: Vd, gm_accessors_: {…}, gm_bindings_: {…}}T: Vd {j: _.Hs, o: "click", T: 0, id: 175, i: ƒ}defaultViewport: _.Id {Ya: Hd, Ua: Dd}gm_accessors_: {url: null, map: null, status: null, defaultViewport: null, metadata: null}gm_bindings_: {url: {…}, map: {…}, status: {…}, defaultViewport: {…}, metadata: {…}, …}i: []j: []ka: "https://firebasestorage.googleapis.com/v0/b/ibikeride-38825.appspot.com/o/GPS%2F1693%2FLinnet_Clough_.gpx?alt=media&token=df99a825-ad91-4e56-a11e-eb37b25aa819"map: ni {gm_bindings_: {…}, __gm: Dg, gm_accessors_: {…}, zoom: 13, center: _.L, …}metadata: {name: "", description: "", snippet: "", author: {…}, hasScreenOverlays: false}o: _.Hs {parameters: {…}, data: _.Je, layerId: "kml:cXOw0bjKUSqLpJ-PU5ay2LvzGlCqf8RDGf0mvwElV57DL-…W7UuaJIvTK6Ih8KbrR5f0GDUugFiS5qRXuKKQY95FQNU8l4CQ", Ch: true, zIndex: 0, …}screenOverlays_changed: ƒ ()status: "OK"ta: ni {gm_bindings_: {…}, __gm: Dg, gm_accessors_: {…}, zoom: 13, center: _.L, …}ua: {ks: "ts:53094984", kv: "3", api: "3", client: "2"}url: "https://firebasestorage.googleapis.com/v0/b/ibikeride-38825.appspot.com/o/GPS%2F1693%2FLinnet_Clough_.gpx?alt=media&token=df99a825-ad91-4e56-a11e-eb37b25aa819"__e3_: {click: {…}, clickable_changed: {…}}__proto__: Object
DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
injection.js:1 31:2.316@http://127.0.0.1:5501/map%20copy.html:content script injected
Grammarly.js:2 [DEFAULT]: WARN : Using DEFAULT root logger
t.printToConsole @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
t.logImpl @ Grammarly.js:2
e.log @ Grammarly.js:2
e.warn @ Grammarly.js:2
e.getRootLogger @ Grammarly.js:2
get @ Grammarly.js:2
e.getLogger @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
n @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
n @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
n @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
n @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
Grammarly.js:2 [WARNING] Using default timeseries implementation.
e.getRootMetric @ Grammarly.js:2
e @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
t.pipe @ Grammarly.js:2
e.rootLogLevelGetter @ Grammarly.js:2
u @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
n @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
n @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
n @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
injection.js:1 31:2.650@http://127.0.0.1:5501/map%20copy.html:session name : rebest2012_injected1592809563353
injection.js:1 31:2.651@http://127.0.0.1:5501/map%20copy.html:content script hasn't injected before.
injection.js:1 31:2.689@http://127.0.0.1:5501/map%20copy.html:result: {}

и вот что я вижу

введите описание изображения здесь

Daniel Mintz · Answer 1 · 23 июня 2020

Я нашел способ заставить эту работу работать. Вероятно, это немного взломано и указывает на более широкую проблему на странице в коде, но по сути я установил функцию SetTimout на 1 секунду вокруг элементов карты var, и теперь она работает :)

const allGPS = document.querySelectorAll('.modalGPS');

allGPS.forEach(all => {

all.addEventListener('click', e => {


const id = e.target.getAttribute('data-id')


const mediaCollection = db.collection("trails").doc(id).collection("GPS")

mediaCollection
// .where("media_type", "==", "GPS")
.onSnapshot(snapshot => {
snapshot.docChanges().forEach(change => {

 const doc = change.doc; {
   
   if(change.type === 'added') {
   
     var storageRef = firebase.storage().ref(doc.data().rel_path + doc.data().media_location);
     storageRef.getDownloadURL().then(function(url) {
 
       addGPS(doc.data(), url);

 });

   }
  
   else {
     console.log('nought here')
   };
  
 };
});
});
});
});

// ===GPS TAB function=====
const addGPS = ((media, url) => {


let htmlGPS = `
       <div id="${media.media_location}" class="mapNOs" style="width: 100%; height: 300px;"> </div>
     `
   
     const foosGPS = document.querySelector('.foosGPS')
      
     foosGPS.innerHTML += htmlGPS 
  
     function timeFunction() {
       setTimeout(function(){ 

 var map = new google.maps.Map(document.getElementById(media.media_location),);

var ctaLayer = new google.maps.KmlLayer({
             url: url,
             map: map
           });

           console.log('map', map, 'layer', ctaLayer, 'url', url);


}, 1000);

}
    timeFunction()     
 })

Как добавить несколько карт Google на одну страницу

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

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

Как добавить несколько карт Google на одну страницу

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

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

Похожие темы