如何在谷歌地图中添加按钮功能而不是标记？答案

【问题标题】：How to add button function instead of marker in google map?如何在谷歌地图中添加按钮功能而不是标记？
【发布时间】：2018-06-03 18:11:04
【问题描述】：

我想将按钮与标记信息联系起来，如果我按下按钮它应该弹出特定标记的信息。我想通过使用链接 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>

【问题讨论】：

标签： javascript html google-api

【解决方案1】：

您可以尝试使用data-attributes 并使用相同的键保存位置和标记的地图。这是一个粗略的想法。一个答案有很多要解释的，你可以在 cmets 中提出任何问题。

// 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>

【讨论】：

感谢您的回答，它帮助了我。