Question

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: