Как добавить функцию кнопки вместо маркера на карте Google? - PullRequest
Новая
       4

Как добавить функцию кнопки вместо маркера на карте Google?

0 голосов
/ 03 июня 2018

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

Код: 

var locations = [
  [tendowningstreet.info, tendowningstreet.lat,
    tendowningstreet.long, 0
  ],
  [republicofnoodles.info, republicofnoodles.lat,
    republicofnoodles.long, 1
  ],
  [prego.info, prego.lat, prego.long, 2],
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 12,
  center: new google.maps.LatLng(17.447412, 78.376230), //Hitech 
  city Address
  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() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));


  function click("button") {
    var button.id = [marker.i]; //The function is wrong i need help at this point.



  }

}
}
<html>

<body>
  <div>
    <ul>
      <li><button type="button" id="1">10 Downing Street in 
              Gachibowli</button></li>
      <li><button type="button" id="2">Republic of Noodles in 
              Madhapur</button></li>
      <li><button type="button" id="3">Prego in Madhapur</button>
      </li>

    </ul>
  </div>

  <div id="map"></div>

</body>

</html>

1 Ответ

0 голосов
/ 03 июня 2018

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

// Stub
var google = {
  maps: {
    InfoWindow: function InfoWindow(){
       this.content = null;
       this.setContent = function(content) {this.content = content};
       this.open = function() {console.log(arguments, this.content)};
    },
    Marker: function Marker(){this.name = "Marker"},
    Map: function Map(){this.name = "Map"},
    LatLng: function LatLng(){},
    event: {addListener : function(){}}
  }
};

var locations = getLocations();
var map = createMap('map');
var infowindow = new google.maps.InfoWindow({});
var markers = createMarkersForLocations(locations, infowindow);
bindButtonEvents(map, infowindow, markers, locations);


function createMarkersForLocations(locations, infowindow) {
  var markerMap = {};
  for (key in locations) {
    if (locations.hasOwnProperty(key)) {
      markerMap[key] = new google.maps.Marker({
        position: new google.maps.LatLng(locations[key].lat,
          locations[key].long),
        map: map
      });

      markerMap[key].originalLocation = locations[key];

      google.maps.event.addListener(markerMap[key], 'click', function () {
        infowindow.setContent(this.originalLocation.info);
        infowindow.open(map, this);
      });
    }
  }
  return markerMap;
}


function createMap(id) {
  return new google.maps.Map(document.getElementById(id), {
    zoom: 12,
    center: new google.maps.LatLng(17.447412, 78.376230)
  });
}

/**
 * <button type="button" data-key="republicOfNoodles">Republic of Noodles in Madhapur</button>
 */
function bindButtonEvents(map, infowindow, markers, locations) {
  Array.from(document.getElementsByTagName('button')).forEach(function(button){
    button.addEventListener('click', function (e) {
        e.preventDefault();
        var key = this.getAttribute('data-key');
        infowindow.setContent(locations[key].info);
        infowindow.open(map, markers[key]);
      })
    });
}

function getLocations() {
  return {
    tenDowningStreet: { info: 'Tending Down Street', lat: 17.447412, long: 78.376230 },
    republicOfNoodles: { info: 'Republic of noodles', lat: 17.447412, long: 78.376230 },
    prego: { info: 'Prego', lat: 17.447412, long: 78.376230 }
  }
}
  <div>
    <ul>
      <li><button type="button" data-key="tenDowningStreet">10 Downing Street in 
              Gachibowli</button></li>
      <li><button type="button" data-key="republicOfNoodles">Republic of Noodles in 
              Madhapur</button></li>
      <li><button type="button" data-key="prego">Prego in Madhapur</button>
      </li>

    </ul>
  </div>

  <div id="map"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...