Как я могу встроить интерактивную панель в маркер Google Map? - PullRequest
Новая
       41

Как я могу встроить интерактивную панель в маркер Google Map?

0 голосов
/ 10 марта 2019

Например, представьте, у меня есть маркер, размещенный в Мэне на карте Google. При нажатии на маркер появится эта интерактивная панель управления в самой карте Google:

https://public.tableau.com/en-us/s/gallery/moose-crashes-maine?gallery=votd

В коде: 

      if(props.content){
        var infoWindow = new google.maps.InfoWindow({
          content:props.content
        });

        marker.addListener('click',function(){
          infoWindow.open(map, marker);
        });

Я заставил маркер прослушивать щелчок, и когда он это делает, он открывает совершенно пустое информационное окно.

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

Возможно ли это?

Вот код для вставки приборной панели: 

<div class='tableauPlaceholder' id='viz1552237426081' style='position: relative'><noscript>
  <a href='#'>
    <img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Mo&#47;MooseCrashesinMaine&#47;MooseCrashes2010-2017Version3&#47;1_rss.png' style='border: none' />
    </a>
</noscript>
  <object class='tableauViz' style='display:none;'>
  <param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' />
  <param name='embed_code_version' value='3' /> <param name='site_root' value='' />
  <param name='name' value='MooseCrashesinMaine&#47;MooseCrashes2010-2017Version3' />
  <param name='tabs' value='no' /><param name='toolbar' value='yes' />
  <param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Mo&#47;MooseCrashesinMaine&#47;MooseCrashes2010-2017Version3&#47;1.png' />
  <param name='animate_transition' value='yes' />
  <param name='display_static_image' value='yes' />
  <param name='display_spinner' value='yes' />
  <param name='display_overlay' value='yes' />
  <param name='display_count' value='yes' />
</object>
</div>
<script type='text/javascript'>
  var divElement = document.getElementById('viz1552237426081');
  var vizElement = divElement.getElementsByTagName('object')[0];
  vizElement.style.width = '1100px';
  vizElement.style.height = '877px';
  var scriptElement = document.createElement('script');
  scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
  vizElement.parentNode.insertBefore(scriptElement, vizElement);
</script>

Ответы [ 2 ]

0 голосов
/ 10 марта 2019

Вы можете отобразить панель встраивания, вставив элемент в информационное окно, а затем запустив связанный javascript в прослушивателе событий "domready" в информационном окне. 

var props = {
  content: "https://public.tableau.com/en-us/s/gallery/moose-crashes-maine?gallery=votd",
  id: "viz1552237426081"
};
if (props.id) {
  var infoWindow = new google.maps.InfoWindow({
    content: document.getElementById(props.id)
  });

  marker.addListener('click', function() {
    infoWindow.open(map, marker);
    google.maps.event.addListener(infoWindow, 'domready', function() {
      var divElement = document.getElementById('viz1552237426081');
      var vizElement = divElement.getElementsByTagName('object')[0];
      vizElement.style.width = '1100px';
      vizElement.style.height = '877px';
      var scriptElement = document.createElement('script');
      scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
      vizElement.parentNode.insertBefore(scriptElement, vizElement);
    });
  });
}

подтверждение концепции скрипки

screenshot of resulting map

фрагмент кода: 

var props = {
  content: "https://public.tableau.com/en-us/s/gallery/moose-crashes-maine?gallery=votd",
  id: "viz1552237426081"
};

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: 45.253783,
      lng: -69.4454689
    }
  });
  // Maine, USA (45.253783, -69.44546889999998)
  var marker = new google.maps.Marker({
    position: {
      lat: 45.253783,
      lng: -69.4454689
    },
    map: map
  });
  if (props.id) {
    var infoWindow = new google.maps.InfoWindow({
      content: document.getElementById(props.id)
    });

    marker.addListener('click', function() {
      infoWindow.open(map, marker);
      google.maps.event.addListener(infoWindow, 'domready', function() {
        var divElement = document.getElementById('viz1552237426081');
        var vizElement = divElement.getElementsByTagName('object')[0];
        vizElement.style.width = '1100px';
        vizElement.style.height = '877px';
        var scriptElement = document.createElement('script');
        scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
        vizElement.parentNode.insertBefore(scriptElement, vizElement);
      });
    });
  }
  map.setCenter(marker.getPosition());
}
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

.tableauPlaceholder {
  display: none;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
<div class='tableauPlaceholder' id='viz1552237426081' style='position: relative'><noscript>
  <a href='#'>
    <img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Mo&#47;MooseCrashesinMaine&#47;MooseCrashes2010-2017Version3&#47;1_rss.png' style='border: none; height:877px; width:1100px;' />
    </a>
</noscript>
  <object class='tableauViz' style='display:none;'>
  <param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' />
  <param name='embed_code_version' value='3' /> <param name='site_root' value='' />
  <param name='name' value='MooseCrashesinMaine&#47;MooseCrashes2010-2017Version3' />
  <param name='tabs' value='no' /><param name='toolbar' value='yes' />
  <param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Mo&#47;MooseCrashesinMaine&#47;MooseCrashes2010-2017Version3&#47;1.png' />
  <param name='animate_transition' value='yes' />
  <param name='display_static_image' value='yes' />
  <param name='display_spinner' value='yes' />
  <param name='display_overlay' value='yes' />
  <param name='display_count' value='yes' />
</object>
</div>
<script type='text/javascript'>
</script>
0 голосов
/ 10 марта 2019

Просто добавьте ссылку на содержимое информационного окна и вообще добавьте HTML-код, который вы предпочитаете для управления содержимым информационного окна 

if(props.content){
 var infoWindow = new google.maps.InfoWindow({
  content:props.content +
  '<a href="https://public.tableau.com/en-us/s/gallery/moose-crashes-maine?gallery=votd"'>my_link</a>'
 });

 marker.addListener('click',function(){
    infoWindow.open(map, marker);
 });
...