自定義信息框

我已經設法實現了'信息框'到我的地圖之一加載保存在mySQL數據庫中的位置，但我想對此做一些更改，但我不知道如何。自定義信息框

我正在使用的代碼如下，但我希望能夠替換信息框的默認行爲，即當地圖加載時出現在每個標記旁邊的信息框僅出現一旦點擊了標記，平移即可將該地圖放在該標記上。然後，當點擊下一個標記時，信息框從第一個標記移動到新點擊的標記，再次使用平移和中心功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Map My Finds - All Locations</title> 
     <link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" /> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script> 
     <script type="text/javascript" src="js/infobox.js"></script> 
     <script type="text/javascript"> 
      var customIcons = { 
      0: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      }, 
      1: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      } 
      }; 

      function load() { 
      var map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
      zoom:6, 
      mapTypeId: 'roadmap' 
      }); 

      // Change this depending on the name of your PHP file 
      downloadUrl("loadalllocations.php", function(data) { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      var bounds = new google.maps.LatLngBounds(); 
      for (var i = 0; i < markers.length; i++) { 
      var locationname = markers[i].getAttribute("locationname"); 
      var address = markers[i].getAttribute("address"); 
      var totalfinds = markers[i].getAttribute("totalfinds"); 
      var point = new google.maps.LatLng( 
      parseFloat(markers[i].getAttribute("osgb36lat")), 
      parseFloat(markers[i].getAttribute("osgb36lon"))); 
      var icon = {}; 
      if (totalfinds == 0) { 
      icon = customIcons[0]; 
      } else if (totalfinds >= 1) { 
      icon = customIcons[1];  
      } 
      var marker = new google.maps.Marker({   
      map: map, 
      position: point, 
      title: address, 
      icon: icon.icon, 
      shadow: icon.shadow 
      }); 
      bounds.extend(point); 
      map.fitBounds(bounds); 

      var boxText = document.createElement("div"); 
      boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: orange; padding: 5px;"; 
      boxText.innerHTML = locationname + "<p>" + 'No. of finds: ' + "<b>" + totalfinds + "</b>" + "</p>";; 
      var myOptions = { 
      content: boxText 
      ,disableAutoPan: false 
      ,maxWidth: 0 
      ,pixelOffset: new google.maps.Size(-140, 0) 
      ,zIndex: null 
      ,boxStyle: { 
      background: "url('tipbox.gif') no-repeat" 
      ,opacity: 0.50 
      ,width: "180px" 
      } 
      ,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 
      }; 
      var ib = new InfoBox(myOptions); 
      ib.open(map, marker); 

      } 
      }); 
      } 

      function downloadUrl(url, callback) { 
      var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

      request.onreadystatechange = function() { 
      if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
      } 
      }; 

      request.open('GET', url, true); 
      request.send(null); 
      } 

      function doNothing() {} 

      </script> 
      </head>  
      <body onLoad="load()"> 
       <div id="map"></div> 
      </body> 
      </html>

我也想多學一點有關信息框，在改變顏色，利潤率等方面，但我只找到了指導在http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/docs/reference.html這是不是很詳細，我希望。有什麼地方可以去獲得更詳細的信息嗎？

這現在已經解決，代碼正在工作。

來源

2011-09-01 IRHM

試試這個sample code for info windows

有一個number of other samples here for other functionalities

你可能尋找的細節是

var contentString = '<div id="content">'+ 
    '<div id="siteNotice">'+ 
    '</div>'+ 
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ 
    '<div id="bodyContent">'+ 
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 
    'sandstone rock formation in the southern part of the '+ 
    'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+ 
    'south west of the nearest large town, Alice Springs; 450&#160;km '+ 
    '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+ 
    'features of the Uluru - Kata Tjuta National Park. Uluru is '+ 
    'sacred to the Pitjantjatjara and Yankunytjatjara, the '+ 
    'Aboriginal people of the area. It has many springs, waterholes, '+ 
    'rock caves and ancient paintings. Uluru is listed as a World '+ 
    'Heritage Site.</p>'+ 
    '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+ 
    'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+ 
    '(last visited June 22, 2009).</p>'+ 
    '</div>'+ 
    '</div>'; 

//create info window with a specific content string 
var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
}); 

//marker listener 
google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map,marker); 
});

來源

2011-09-01 15:41:01 ZMorek

嗨，用於回覆我的帖子非常感謝。我看過你突出顯示的其他例子，我認爲InfoBox是更好的選擇。然而，我嘗試了代碼。（你的建議，所以我的代碼的最後一行是google.maps.event.addListener（marker，'click'，function（）{var ib = new InfoBox（myOptions）; ib.open（map，marker） ;}）點擊事件的作品，但無論我點擊InfoBox上的哪個標記，只會出現在地圖上最後一個標記旁邊。你有任何想法可以解決這個問題嗎？非常感謝，再次。克里斯 – IRHM

我有同樣的問題，[建議解決方案]（http://stackoverflow.com/questions/3576488/google-maps-infowindow-only-loading-last-record-on-markers）是拉出信息窗口更加全球化並更新其功能。這與javascript關閉有關。祝你好運！ – ZMorek

嗨，非常感謝您看看我的文章和您的建議。不幸的是，我似乎無法得到這個工作。我只是想知道是不是因爲你使用'InfoWindow'而我正在使用InfoBox。親切的問候Chris。 – IRHM

自定義信息框

回答

相關問題