GMAPS API事件处理引脚点

GMAPS API event handling for pin points

本文关键字:引脚 事件处理 API GMAPS      更新时间:2023-09-26

我有一个gmaps的api,我有一些标记,当一个特定的标记被点击,我希望它更新一些html以外的api,现在我可以做到这一点没有问题,如果它只是一个常规的事情,但脚本的方式是它是面向对象的,没有办法我可以检查标记,说当x被点击更新innerhtml的y等…

     var map;
/*array for locations below */
var locations = [
  ['<h4>Kingsley Recruitment Liverpool <br/><br/> 11th Floor, The Plaza<br/> 100 Old Hall Street <br/> Liverpool <br/> L3 9QJ <br/> <br/> 0151 242 1630</h4>', 53.4109146,-2.9947334999999384],
  ['<h4>Kingsley Recruitment Manchester <br/><br/> Centurion House<br/>129 Deansgate<br/>Manchester<br/>M3 3WR <br/> <br/> 0161 393 9889  </h4>', 53.479798 , -2.2479048],
  ['<h4>Kingsley Recruitment London <br><br> Warnford Court <br> 29 Throgmorton Street<br> London <br>  EC2N 2AT <br><br> 0203 817 7030</h4>', 51.5074, 0.1278],
  ['<h4>Kingsley Recruitment Birmingham <br><br> Cornwall Buildings <br> 45 Newhall Street <br> Birmingham <br> B3 3QR <br><br> 0121 796 8460</h4>', 52.48208, -1.9027578],

  ['<h4>Kingsley Recruitment Leeds <br><br> West One <br> Wellington Street<br>Leeds<br>LS1 1BA <br><br>0113 887 2170 </h4>', 53.8008 , -1.5491]
];
// Setup the different icons and shadows
var iconURLPrefix = 'https://www.google.com/intl/en_ALL/mapfiles/';
var icons = [
  iconURLPrefix + 'marker_black.png',
]
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center); 
});
var iconsLength = icons.length;
var map = new google.maps.Map(document.getElementById('MAPS'), {
  zoom: 6,
  center: new google.maps.LatLng(52.6369, -1.1398),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: false,
  streetViewControl: true,
  scrollwheel:false,
  panControl: false,
  zoomControlOptions: {
     position: google.maps.ControlPosition.BOTTOM_LEFT
  }
});


var infowindow = new google.maps.InfoWindow({
  maxWidth: 160
});
var markers = new Array();
var iconCounter = 0;
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {  
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2],locations[i][3],locations[i][4]),
    map: map,
    icon: icons[iconCounter]
  });
  markers.push(marker);
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
  iconCounter++;
  if(iconCounter >= iconsLength) {
    iconCounter = 0;
  }
}
function autoCenter() {
  //  Create a new viewpoint bound
  var bounds = new google.maps.LatLngBounds();
  //  Go through each...
  for (var i = 0; i < markers.length; i++) {  
    bounds.extend(markers[i].position);
  }
  //  Fit these bounds to the map
  map.fitBounds(bounds);
}
autoCenter();

我想让它更新

下面的li内部HTML
    <div class = "contact-icons">
      <ul>
      <div class = "indiv-icons">
       <img src = "images/call-icon.PNG"/> <li>CALL US <br/> +333 333 333 </li>
      </div>
      <div class = "indiv-icons"> 
       <img src = "images/address-icon.PNG"/> <li>ADDRESS<br/> 1234 Quigley Street</li>
      </div>
      <div class = "indiv-icons">  
       <img src = "images/message-icon.PNG"/> <li>EMAIL<br/> support@yourcompany.com</li>
      </div> 
      </ul>
    </div>
  </div>

对我来说这似乎是一个复杂的任务这就是为什么我把它放在这个网站上它是自我的所以你可以看到它是http://79.170.40.182/kingsley-test.co.uk/kingsley%209.9.2016/kingsley-new/contact.php

当你点击一个标记时,你希望它调用什么函数?您只希望向一个标记添加事件还是向所有标记添加事件?

如果是所有标记,只需添加

nameOfYourFunction(marker)

就在

后面
 google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {