自定义信息框

我已经设法实现了'信息框'到我的地图之一加载保存在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

自定义信息框

回答

相关问题