文章/答案/技术大牛

发布

社区首页 >问答首页 >对存储在数组中的点使用谷歌地图InfoBox

问对存储在数组中的点使用谷歌地图InfoBox
EN

Stack Overflow用户

提问于 2012-04-13 01:43:24

回答 2查看 995关注 0票数 0

我已经在一个相当简单的应用程序中成功地使用了InfoBox，但我正在努力让它在稍微复杂一点的应用程序上工作。当然，我错过了一些简单的东西。

其目的是显示一张带有酒店和最近机场的地图。然后InfoBox显示酒店的名称(非常简单:没问题)和为机场提供服务的航班列表(问题！)酒店详细信息在URL中作为参数传递。机场详细信息是存储在脚本中的数组。

我遇到的问题是，当我单击机场图标时，地图会跳转到机场数组中的最后一个机场，并显示该机场的InfoBox内容。

你可以在http://http://new.littlehotels.co.uk/maps/map_airport_spain.php?lat=39.755688&lng=2.636354&zoom=9&hotel=Hotel%20Colorado上看到这个问题。

代码是：

<?php 
$hotel = $_GET['hotel'];
?>

<!DOCTYPE html>
<html>
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Little Hotels - Google Map</title>
<meta name="description" content="Little Hotels provides maps showing the location of hotels, using Google Maps to create both a street/road map and a satellite image.">
<meta name="keywords" content="Little Hotels, Little Hotels of Spain, Spain, Little Hotels of Morocco, Morocco, Little Hotels of France, France, mainland spain, balearic, balearics, canary, canaries, small, hotel, hotels, map, google map, holiday, holidays">
<style type="text/css">
html { height: 100% }
body{ height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#333333;}
a:link, a:visited, a:hover {color: #FF6600; text-decoration: none; font-weight: bold;}
h1{font-size: 16px; color: #2B8CB9; font-weight: bold;}
#content{padding: 0 5px 0; width: 640px;}
#map_canvas { height: 100%; font-family:Helvetica, Arial, sans-serif; font-size:12px; font-weight:bold; color:#4d6eb0;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="../js/infobox.js"></script>
<script type="text/javascript" src="../js/downloadxml.js"></script>
<script type="text/javascript"> 
//<![CDATA[
     // global "map" variable
      var map = null;

  var hotelimage = new google.maps.MarkerImage('../images/hotel_icon.gif',
      new google.maps.Size(32, 37),
      new google.maps.Point(0,0),
      new google.maps.Point(16, 35));
  var shadow = new google.maps.MarkerImage('../images/hotel_shadow.png',
      new google.maps.Size(51, 37),
      new google.maps.Point(0,0),
      new google.maps.Point(16, 35));

// A function to create the markers and set up the event window function 
function createMarker(latlng, hotel) {
    var contentString = hotel;
    var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        icon: image,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        var ib = new InfoBox(ibOptions);
        boxText.innerHTML = contentString;
        ib.open(map, marker);
        });
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

// InfoBox
 var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid #4d6eb0; margin-top: 8px; background: white; padding: 5px;";

        var ibOptions = {
                 content: boxText
                ,disableAutoPan: false
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(10, -50)
                ,zIndex: null
                ,boxStyle: { 
                  width: "160px"
                 }
                ,closeBoxMargin: "10px 2px 2px 2px"
                ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: false
                ,pane: "floatPane"
                ,enableEventPropagation: false
        };
////////////////////////7

function initialize() {
      var lat = 0;
      var lng = 0;
      var zoom = 0;
      var hotelname = 0;
      var query = location.search.substring(1);
      var pairs = query.split("&");
      for (var i=0; i<pairs.length; i++) {
    var pos = pairs[i].indexOf("=");
    var argname = pairs[i].substring(0,pos).toLowerCase();
    var value = pairs[i].substring(pos+1);
        if (argname == "lat") {lat = parseFloat(value);}
        if (argname == "lng") {lng = parseFloat(value);}
        if (argname == "zoom") {zoom = parseInt(value);}
        if (argname == "hotel") {hotelname = unescape(value);}
      }
    var thisLatlng = new google.maps.LatLng(lat, lng);
  var myOptions = {
center: thisLatlng,
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
   streetViewControl: false,
   zoomControl: true,
   zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
   }
   }

   var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

  setMarkers(map, airports);


//////////////////////
  var hotelmarker = new google.maps.Marker({
      position: thisLatlng,
      map: map,
      icon: hotelimage,
      shadow: shadow,
      zIndex: 9999
  });
      google.maps.event.addListener(hotelmarker, 'click', function() {
        var ib = new InfoBox(ibOptions);
        boxText.innerHTML = hotelname;
        ib.open(map, hotelmarker);
        });

////////////////////


  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

}

var airports = [
// This section was common to airport_float.php and flights.php, may still go with flights.php
[38.287242,-0.557299,'<b><u>Flights Guide - Alicante airport</u></b><br><table class="verdana"><tr><td width="135">Belfast </td><td>Aer Lingus, EasyJet, Flybe, Thomson </td></tr><tr><td>Birmingham </td><td>bmibaby, Monarch, Ryanair, Thomson </td></tr><tr><td>Blackpool </td><td>Jet2 </td></tr><tr><td>Bournemouth </td><td>Ryanair </td></tr><tr><td>Bristol </td><td>EasyJet, Ryanair, Thomson </td></tr><tr><td>Cardiff </td><td>bmibaby, Thomson </td></tr><tr><td>Cork </td><td>Aer Lingus </td></tr><tr><td>Doncaster Sheffield </td><td>Ryanair, Thomson </td></tr><tr><td>Dublin </td><td>Aer Lingus, Flybe, Ryanair </td></tr><tr><td>Durham Tees Valley </td><td>Ryanair, Thomson </td></tr><tr><td>East Midlands </td><td>bmibaby, Jet2, Ryanair, Thomson </td></tr><tr><td>Edinburgh </td><td>EasyJet, Flybe, Ryanair </td></tr><tr><td>Exeter </td><td>Flybe </td></tr><tr><td>Glasgow </td><td>EasyJet, Flybe, Jet2, Ryanair, Thomson </td></tr><tr><td>Guernsey </td><td>Flybe </td></tr><tr><td>Isle of Man </td><td>Flybe </td></tr><tr><td>Jersey </td><td>Flybe </td></tr><tr><td>Kerry </td><td>Ryanair </td></tr><tr><td>Knock </td><td>Ryanair </td></tr><tr><td>Leeds Bradford </td><td>Jet2, Flybe, Ryanair </td></tr><tr><td>Liverpool </td><td>EasyJet, Ryanair, </td></tr><tr><td>London Gatwick </td><td>EasyJet, Monarch, Ryanair, Thomson </td></tr><tr><td>London Luton </td><td>EasyJet, Monarch </td></tr><tr><td>London Stansted </td><td>airberlin, EasyJet, Ryanair </td></tr><tr><td>Manchester </td><td>EasyJet, Flybe, Jet2, Monarch, Thomson </td></tr><tr><td>Newcastle </td><td>EasyJet, Flybe, Jet2, Thomson </td></tr><tr><td>Newquay </td><td>Ryanair </td></tr><tr><td>Norwich </td><td>Thomson </td></tr><tr><td>Southampton </td><td>Flybe </td></tr></table>'],
[36.848101,-2.371502,'<b><u>Flights Guide - Almeria airport</u></b><br><table class="verdana"><tr><td width="130">Birmingham </td><td>Monarch </td></tr><tr><td>East Midlands </td><td>bmibaby </td></tr><tr><td>London Gatwick </td><td>EasyJet </td></tr><tr><td>London Stansted </td><td>Ryan Air </td></tr><tr><td>Manchester </td><td>Monarch </td></tr></table>'],
[43.559434,-6.032181,'<b><u>Flights Guide - Asturias (Oviedo) airport</u></b><br><table class="verdana"><tr><td width="130">Stansted</td><td>EasyJet</td></tr></table>'],
[41.29896,2.076931,'<b><u>Flights Guide - Barcelona airport</u></b><br><table class="verdana"><tr><td width="130">Belfast </td><td>Aer Lingus, EasyJet </td></tr><tr><td>Bristol </td<td>EasyJet </td></tr><tr><td>Cork </td><td>Aer Lingus </td></tr><tr><td>Doncaster Sheffield </td><td>EasyJet </td></tr><tr><td>Dublin </td><td>Aer Lingus, Ryanair </td></tr><tr><td>East Midlands </td><td>bmibaby </td></tr><tr><td>Edinburgh </td><td>Ryanair </td></tr><tr><td>Leeds Bradford </td><td>Jet2, Ryanair </td></tr><tr><td>Liverpool </td><td>EasyJet </td></tr><tr><td>London City </td><td>BA Cityflyer </td></tr><tr><td>London Gatwick </td><td>EasyJet </td></tr><tr><td>London Heathrow </td><td>British Airways </td></tr><tr><td>London Luton </td><td>EasyJet </td></tr><tr><td>London Stansted </td><td>airberlin, EasyJet </td></tr><tr><td>Manchester </td><td>Monarch </td></tr><tr><td>Newcastle </td><td>EasyJet </td></tr></table>'],
[43.305194,-2.906055,'<b><u>Flights Guide - Bilbao airport</u></b><br><table class="verdana"><tr><td width="130">Dublin </td><td>Aer Lingus </td></tr><tr><td>London Heathrow </td><td>Vueling </td></tr><tr><td>London Stansted </td><td>EasyJet </td></tr></table>'],
[36.152638,-5.348368,'<b><u>Flights Guide - Gibraltar airport</u></b><br><table class="verdana"><tr><td width="130">London Gatwick </td><td>EasyJet </td></tr><tr><td>London Heathrow </td><td>British Airways </td></tr><tr><td>Liverpool </td><td>EasyJet </td></tr><tr><td>London Luton </td><td>Monarch </td></tr><tr><td>Manchester </td><td>Monarch </td></tr></table>'],
[41.898827,2.765465,'<b><u>Flights Guide - Girona airport</u></b><br><table class="verdana"><tr><td width="130">Birmingham </td><td>Ryanair,Thomson </td></tr><tr><td>Bournemouth </td><td>Ryanair </td></tr><tr><td>Bristol </td><td>Ryanair </td></tr><tr><td>Dublin </td><td>Ryanair </td></tr><tr><td>East Midlands </td><td>Ryanair </td></tr><tr><td>Glasgow </td><td>Ryanair </td></tr><tr><td>Liverpool </td><td>Ryanair </td></tr><tr><td>London Gatwick </td><td>Ryanair,Thomson </td></tr><tr><td>London Luton </td><td>Ryanair </td></tr><tr><td>London Stansted </td><td>Ryanair </td></tr><tr><td>Manchester </td><td>Thomson </td></tr><tr><td>Newcastle </td><td>Ryanair </td></tr></table>'],
[37.185963,-3.776894,'<b><u>Flights Guide - Granada airport</u></b><br><table class="verdana"><tr><td>No flights from UK or Ireland at the moment</td></tr></table>'],
[38.876334,1.367626,'<b><u>Flights Guide - Ibiza airport</u></b><br><table class="verdana"><tr><td width="130">Aberdeen </td><td>Thomson </td></tr><tr><td width="130">Belfast </td><td>EasyJet, Jet2, Thomson </td></tr><tr><td>Birmingham </td><td>Monarch, Ryanair, Thomson </td></tr><tr><td>Bournemouth </td><td>Ryanair, Thomson </td></tr><tr><td>Bristol </td><td>EasyJet, Thomson </td></tr><tr><td>Cardiff </td><td>Bmibaby, Thomson </td></tr><tr><td>Doncaster Sheffield </td><td>Thomson </td></tr><tr><td>Dublin </td><td>Aer Lingus, Ryanair </td></tr><tr><td>East Midlands </td><td>Bmibaby, Ryanair, Thomson </td></tr><tr><td>Edinburgh </td><td>Jet2, Thomson </td></tr><tr><td>Exeter </td><td>Thomson </td></tr><tr><td>Glasgow </td><td>EasyJet, Ryanair, Thomson </td></tr><tr><td>Leeds Bradford </td><td>Jet2, Ryanair </td></tr><tr><td>Liverpool </td><td>EasyJet, Ryanair </td></tr><tr><td>London Gatwick </td><td>EasyJet, Monarch, Thomson </td></tr><tr><td>London Luton </td><td>EasyJet, Thomson </td></tr><tr><td>London Stansted </td><td>EasyJet, Ryanair, Thomson </td></tr><tr><td>Manchester </td><td>Jet2, Monarch, Thomson </td></tr><tr><td>Newcastle </td><td>EasyJet, Jet2, Thomson </td></tr><tr><td>Norwich </td><td>Thomson </td></tr></table>'],
[36.750164,-6.06411,'<b><u>Flights Guide - Jerez airport</u></b><br><table class="verdana"><tr><td width="130">London Stansted</td><td>Ryanair</td></tr></table>'],
[43.302071,-8.380938,'<b><u>Flights Guide - La Coruña airport</u></b><br><table class="verdana"><tr><td width="130">London Heathrow</td><td>Vueling</td></tr></table>'],
[40.46889,-3.56884,'<b><u>Flights Guide - Madrid airport</u></b><br><table class="verdana"><tr><td width="130">Bristol </td><td>EasyJet </td></tr><tr><td>Dublin </td><td>Aer Lingus, Ryan Air </td></tr><tr><td>Edinburgh </td><td>EasyJet </td></tr><tr><td>Liverpool </td><td>EasyJet </td></tr><tr><td>London City </td><td>BA Cityflyer </td></tr><tr><td>London Gatwick </td><td>EasyJet, Ryanair </td></tr><tr><td>London Heathrow </td><td>British Airways, Iberia </td></tr><tr><td>London Luton </td><td>EasyJet </td></tr><tr><td>London Stansted </td><td>Ryanair </td></tr></table>'],
[36.675578,-4.494438,'<b><u>Flights Guide - Malaga airport</u></b><br><table class="verdana"><tr><td width="130">Belfast </td><td>Aer Lingus, EasyJet, Flybe, Thomson </td></tr><tr><td>Birmingham </td><td>bmibaby, Monarch, Ryanair, Thomson </td></tr><tr><td>Blackpool </td><td>Jet2 </td></tr><tr><td>Bournemouth </td><td>Ryanair, Thomson </td></tr><tr><td>Bristol </td><td>EasyJet, Ryanair, Thomson </td></tr><tr><td>Cardiff </td><td>bmibaby, Thomson </td></tr><tr><td>Cork </td><td>Aer Lingus, Ryanair </td></tr><tr><td>Doncaster Sheffield </td><td>Thomson </td></tr><tr><td>Dublin </td><td>Aer Lingus, Flybe, Ryanair </td></tr><tr><td>East Midlands </td><td>bmibaby, Ryanair, Thomson </td></tr><tr><td>Edinburgh </td><td>Flybe, Jet2, Ryanair </td></tr><tr><td>Exeter </td><td>Flybe </td></tr><tr><td>Glasgow </td><td>EasyJet, Flybe, Ryanair, Thomson </td></tr><tr><td>Guernsey </td><td>Flybe </td></tr><tr><td>Jersey </td><td>Flybe </td></tr><tr><td>Leeds Bradford </td><td>Flybe, Jet2, Ryanair </td></tr><tr><td>Liverpool </td><td>EasyJet, Ryanair </td></tr><tr><td>London Gatwick </td><td>airberlin, Aer Lingus, EasyJet, Monarch, Thomson </td></tr><tr><td>London Heathrow </td><td>British Airways </td></tr><tr><td>London Luton </td><td>EasyJet, Monarch, </td></tr><tr><td>London Stansted </td><td>EasyJet, Ryanair </td></tr><tr><td>Manchester </td><td>EasyJet, Flybe, Monarch, Jet2, Thomson </td></tr><tr><td>Newcastle </td><td>EasyJet, Flybe, Jet2, Thomson </td></tr><tr><td>Shannon </td><td>Ryanair </td></tr><tr><td>Southampton </td><td>Flybe </td></tr></table>'],
[39.549059,2.731476,'<b><u>Flights Guide - Mallorca airport (Palma de Mallorca)</u></b><br><table class="verdana"><tr><td width="135">Aberdeen </td><td>Thomson </td></tr><tr><td>Belfast </td><td>EasyJet, Jet2, Thomson </td></tr><tr><td>Birmingham </td><td>bmibaby, Monarch, Ryanair, Thomson </td></tr><tr><td>Blackpool </td><td>Jet2 </td></tr><tr><td>Bournemouth </td><td>Ryanair, Thomson </td></tr><tr><td>Bristol </td><td>EasyJet, Ryanair, Thomson </td></tr><tr><td>Cardiff </td><td>Bmibaby, Thomson </td></tr><tr><td>Cork </td><td>Aer Lingus, Thomson </td></tr><tr><td>Derry </td><td>Thomson </td></tr><tr><td>Dublin </td><td>Aer Lingus, Ryanair, Thomson </td></tr><tr><td>Doncaster Sheffield </td><td>EasyJet, Thomson </td></tr><tr><td>Durham Tees Valley </td><td>Thomson </td></tr><tr><td>East Midlands </td><td>bmibaby, Jet2, Ryanair, Thomson </td></tr><tr><td>Edinburgh </td><td>EasyJet, Flybe, Jet2, Ryanair, Thomson </td></tr><tr><td>Exeter </td><td>Flybe, Thomson </td></tr><tr><td>Glasgow </td><td>EasyJet, Flybe, Jet2, Ryanair, Thomson </td></tr><tr><td>Guernsey </td><td>Flybe </td></tr><tr><td>Humberside </td><td>Thomson </td></tr><tr><td>Jersey </td><td>Flybe </td></tr><tr><td>Leeds Bradford </td><td>Flybe, Jet2, Ryanair, Thomson </td></tr><tr><td>Liverpool </td><td>EasyJet, Ryanair </td></tr><tr><td>London Gatwick </td><td>airberlin, EasyJet, Monarch, Thomson </td></tr><tr><td>London Luton </td><td>EasyJet, Monarch, Thomson </td></tr><tr><td>London Stansted </td><td>airberlin, EasyJet, Ryanair, Thomson </td></tr><tr><td>Manchester </td><td>bmibaby, EasyJet, Flybe, Jet2, Monarch, Thomson </td></tr><tr><td>Newcastle </td><td>EasyJet, Flybe, Jet2, Thomson </td></tr><tr><td>Norwich </td><td>Thomson </td></tr><tr><td>Shannon </td><td>Ryanair, Thomson </td></tr><tr><td>Southampton </td><td>Flybe, Thomson </td></tr></tr></table>'],
[39.864821,4.226303,'<b><u>Flights Guide - Menorca airport (Mahon)</u></b><br><table class="verdana"><tr><td width="135">Aberdeen </td><td>Thomson </td></tr><tr><td>Belfast </td><td>Jet2 </td></tr><tr><td>Birmingham </td><td>Monarch Thomson </td></tr><tr><td>Bristol </td><td>EasyJet, Thomson </td></tr><tr><td>Cardiff </td><td>Bmibaby, Thomson </td></tr><tr><td>Doncaster Sheffield </td><td>Thomson </td></tr><tr><td>East Midlands </td><td>bmibaby, Thomson </td></tr><tr><td>Edinburgh </td><td>Jet2 </td></tr><tr><td>Exeter </td><td>Thomson </td></tr><tr><td>Glasgow </td><td>Thomson </td></tr><tr><td>Leeds Bradford </td><td>Jet2 </td></tr><tr><td>Liverpool </td><td>EasyJet </td></tr><tr><td>London Gatwick </td><td>EasyJet, Monarch, Thomson </td></tr><tr><td>London Luton </td><td>EasyJet, Monarch, Thomson </td></tr><tr><td>London Stansted </td><td>Thomson </td></tr><tr><td>Manchester </td><td>EasyJet, Monarch, Thomson </td></tr><tr><td>Newcastle </td><td>EasyJet, Jet2, Thomson </td></tr><tr><td>Norwich </td><td>Thomson </td></tr></table>'],
[37.775192,-0.817623,'<b><u>Flights Guide - Murcia airport</u></b><br><table class="verdana"><tr><td width="130">Belfast </td><td>Jet2 </td></tr><tr><td>Birmingham </td><td>bmibaby, Ryanair </td></tr><tr><td>Blackpool </td><td>Jet2 </td></tr><tr><td>Bournemouth </td><td>Ryanair </td></tr><tr><td>Bristol </td><td>EasyJet </td></tr><tr><td>Cardiff </td><td>bmibaby </td></tr><tr><td>Dublin </td><td>Ryanair </td></tr><tr><td>East Midlands </td><td>Ryanair </td></tr><tr><td>Edinburgh </td><td>Jet2 </td></tr><tr><td>Glasgow </td><td>Ryanair </td></tr><tr><td>Leeds Bradford </td><td>Jet2, Ryanair </td></tr><tr><td>Liverpool </td><td>Ryanair </td></tr><tr><td>London Gatwick </td><td>EasyJet </td></tr><tr><td>London Luton </td><td>Ryanair </td></tr><tr><td>London Stansted </td><td>Ryanair </td></tr><tr><td>Manchester </td><td>Jet2 </td></tr><tr><td>Newcastle </td><td>EasyJet, Jet2 </td></tr></table>'],
[41.147509,1.156311,'<b><u>Flights Guide - Reus airport</u></b><br><table class="verdana"><tr><td width="130">Belfast </td><td>Thomson </td></tr><tr><td>Birmingham </td><td>Ryanair, Thomson </td></tr><tr><td>Bristol </td><td>Ryanair, Thomson </td></tr><tr><td>Cardiff </td><td>Thomson </td></tr><tr><td>Cork </td><td>Thomson </td></tr><tr><td>Derry </td><td>Thomson </td></tr><tr><td>Doncaster Sheffield </td><td>Thomson </td></tr><tr><td>Dublin </td><td>Ryanair, Thomson </td></tr><tr><td>East Midlands </td><td>Ryanair, Thomson </td></tr><tr><td>Glasgow </td><td>Ryanair, Thomson </td></tr><tr><td>Liverpool </td><td>Ryanair </td></tr><tr><td>London Gatwick </td><td>Thomson </td></tr><tr><td>London Luton </td><td>Ryanair, Thomson </td></tr><tr><td>London Stansted </td><td>Ryanair </td></tr><tr><td>Manchester </td><td>Jet2, Thomson </td></tr><tr><td>Newcastle </td><td>Thomson </td></tr><tr><td>Shannon </td><td>Thomson </td></tr></table>'],
[43.423315,-3.824015,'<b><u>Flights Guide - Santander airport</u></b><br><table class="verdana"><tr><td width="130">Dublin</td><td>Ryanair</td></tr><tr><td>London Stansted</td><td>Ryanair</td></tr></table>'],
[42.898604,-8.420506,'<b><u>Santiago de Compostela airport</u></b><br><table class="verdana"><tr><td width="130">Dublin</td><td>Aer Lingus</td></tr><tr><td>London Stansted</td><td>Ryanair</td></tr></table>'],
[37.423139,-5.899572,'<b><u>Flights Guide - Seville airport</u></b><br><table class="verdana"><tr><td width="130">Bristol </td><td>Ryanair </td></tr><tr><td>Dublin </td><td>Ryanair </td></tr><tr><td>Liverpool </td><td>Ryanair </td></tr><tr><td>London Gatwick </td><td>Ryanair </td></tr><tr><td>London Stansted </td><td>Ryanair </td></tr><tr><td>London Heathrow </td><td>Vueling </td></tr></table>'],
[39.492119,-0.476704,'<b><u>Flights Guide - Valencia airport</u></b><br><table class="verdana"><tr><td width="130">Bristol </td><td>EasyJet, Ryanair </td></tr><tr><td>Dublin </td><td>Ryanair </td></tr><tr><td>East Midlands </td><td>Ryanair </td></tr><tr><td>London Gatwick </td><td>EasyJet </td></tr><tr><td>London Stansted </td><td>Ryanair </td></tr></table>'],
[41.70701,-4.846344,'<b><u>Flights Guide - Valladolid airport</u></b><br><table class="verdana"><tr><td width="130">Stansted</td><td>Ryanair</td></tr></table>'],
[42.883134,-2.730618,'<b><u>Flights Guide - Vitoria airport</u></b><br><table class="verdana"><tr><td>No flights from UK or Ireland at the moment</td></tr></table>'],
[41.663359,-1.008167,'<b><u>Flights Guide - Zaragoza airport</u></b><br><table class="verdana"><tr><td width="130">Stansted</td><td>Ryanair</td></tr></table>']
// End of common section
];

function setMarkers(map, locations) {
var airimage = new google.maps.MarkerImage(
  '../images/air_icon.png',
      new google.maps.Size(32, 37),
      new google.maps.Point(0,0),
      new google.maps.Point(16, 35));

var airshadow = new google.maps.MarkerImage(
  '../images/hotel_shadow.png',
      new google.maps.Size(51, 37),
      new google.maps.Point(0,0),
      new google.maps.Point(16, 35));

  for (var i = 0; i < locations.length; i++) {
    var airport = locations[i];
    var infocontent = airport [2]
    var myLatLng = new google.maps.LatLng(airport[0], airport[1]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: airimage,
        shadow: airshadow
    });
      google.maps.event.addListener(marker, 'click', function() {
        var ib = new InfoBox(ibOptions);
        boxText.innerHTML = infocontent;
        ib.open(map, marker);
        });
}
}

//]]>
</script> 
</head> 

<body onload="initialize()"> 
<div id="content">
<h1>Location - <?php echo $hotel; ?></h1>
<span class="verdana"><br /></span>
<table border=1 bordercolor="#666666">
      <tr>
        <td>
<div id="map_canvas" style="width: 640px; height: 450px"></div>
        </td>
      </tr>
</table>
<br />
</div>
</body> 
</html>

还有各种各样的琐事需要解决，比如infobox选项的格式化，但首先我需要让它正常工作。我怀疑问题出在脚本末尾的"addListener“中，但我就是看不到它。

google-maps-api-3

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-04-13 07:59:04

再见！

@Chang的想法是正确的，但是闭包当然应该包含有[i]的airport定义

  var ib = new InfoBox(ibOptions);

  for (var i = 0; i < locations.length; i++) {
    (function(i) {
    var airport = locations[i];
    var infocontent = airport [2]
    var myLatLng = new google.maps.LatLng(airport[0], airport[1]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: airimage,
        shadow: airshadow
    });
      google.maps.event.addListener(marker, 'click', function() {
        boxText.innerHTML = infocontent;
        ib.close();
        ib.open(map, marker);
        });
    })(i); 
  }

当我测试的时候，我注意到InfoBoxes变得很大。我向你们介绍的两个想法是：

Change boxStyle：简单，但难看，因为在我的浏览器Chrome中，滚动条与框不对齐。

var ibOptions ={ content: boxText，disableAutoPan: false，maxWidth: 0，pixelOffset: new google.maps.Size(10，-50)，zIndex: null，boxStyle：{ width："180px"，//由于滚动条高度："150px"，overflow："auto“}而加宽。

更改表格的样式。在你的例子中，你称表格样式为"verdana“。不那么难看，但需要工作，所以它不会有太多的障碍。

.verdana { display: block；max-height: 150px；overflow-y: auto；}

再见！

票数 0

Stack Overflow用户

发布于 2012-04-13 02:19:47

好了，我已经取得了一些进展。我之前发现对于InfoBox来说一个div就足够了，所以我在循环之外定义它。然后，需要一个闭包才能使innerHTML持久化。我注意到内容是静态的

  var infocontent = airport [2]

所以我在循环中添加了infocontent + i。

  var ib = new InfoBox(ibOptions);

  for (var i = 0; i < locations.length; i++) {
    var airport = locations[i];
    var infocontent = airport [2]
    var myLatLng = new google.maps.LatLng(airport[0], airport[1]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: airimage,
        shadow: airshadow
    });

    (function(i) {
      google.maps.event.addListener(marker, 'click', function() {
        boxText.innerHTML = infocontent + i;
        ib.open(map, this);
        });
    })(i);

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10128892

复制

相似问题

问对存储在数组中的点使用谷歌地图InfoBox
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对存储在数组中的点使用谷歌地图InfoBoxEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对存储在数组中的点使用谷歌地图InfoBox
EN