1

我不是开发人员，我正在尝试逐步学习 javascript。现在，我需要在我正在处理的 gmap 中添加一个简单的信息框。问题是，我添加了谷歌参考中解释的代码，但它不起作用：一开始我使用的 infowindow 效果很好，但没有那么定制。我还将 infobox.js 链接放在该页面中，这是最后一个版本。

这是测试页面：http ://www.squassabia.com/aree_espositive_prova2.asp

我需要做的是显示您在代码中看到的消息（boxText.innerHTML），只是为了逐步理解它并保持简单。之后，我将对其进行样式设置并从 xml 添加数据（我认为这不会那么困难）。

由于我没有在任何旧帖子中找到任何解决方案，如果你们中的任何人都可以给我有关如何解决问题的线索，将不胜感激，我已经尝试了所有方法并将信息框的东西几乎无处不在:(

干杯

我给你初始化（）代码：

//icone custom
var customIcons = {
  negozio: {icon: '/images/gmaps/mc.png'},
  outlet: {icon: '/images/gmaps/pin_fuc_outlet.png'},
  sede: {icon: '/images/gmaps/pin_fuc_home.png'}
};

var clusterStyles = [
{
textColor: 'white',
url: '/images/gmaps/mc.png',
height: 48,
width: 48
}];


function initialize() {

//creo una istanza della mappa
var map = new google.maps.Map(document.getElementById("mapp"), {
    center: new google.maps.LatLng(45.405, 9.867),
    zoom: 9,
    mapTypeId: 'roadmap',
    saturation: 20, //scrollwheel: false
  });


//stile della mappa
var pinkroad = [ //creo un array di proprietà
  { 
    featureType: "all", //seleziono la feature
    stylers: [{gamma: 0.8 },{ lightness: 50 },{ saturation: -100}]
  },
  {
    featureType: "road.highway.controlled_access",
    stylers: [{ hue: "#FF3366" },{ saturation: 50 },{ lightness: -5 }]
  }
];
map.setOptions({styles: pinkroad});

var name;

//Creates content and style
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = "Prova Infobox<br >Successo!!Test Text";

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.75, width: "280px"}
            ,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);


//creo il marker
downloadUrl("xml/negozi.xml", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) 
  {  
    var type = markers[i].getAttribute("tipo");
    var address = markers[i].getElementsByTagName("indirizzo")[0].childNodes[0].nodeValue;
    var city = markers[i].getElementsByTagName("citta")[0].childNodes[0].nodeValue;
    var phone = markers[i].getElementsByTagName("telefono")[0].childNodes[0].nodeValue;
    name = markers[i].getElementsByTagName("nome")[0].childNodes[0].nodeValue;

    var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));

    var html = name + '<br />' + address + '<br />' + city + '<br />' + phone;
    var icon = '/images/gmaps/pin_fuc.png';
    var marker = new google.maps.Marker({map: map, position: point, icon :'/images/gmaps/pin_fuc.png'});

    /*google.maps.event.addListener(marker,"click", function(){ 
        map.panTo(this.position);
    });*/

    createMarkerButton(marker);

    google.maps.event.addListener(marker, "click", function (e) {
        ib.open(map);
    });

   }  

});

function createMarkerButton(marker) {
  //Creates a sidebar button
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(name));
    ul.appendChild(li);

  //Trigger a click event to marker when the button is clicked.
  google.maps.event.addDomListener(li, "mouseover", function(){
    marker.setAnimation(google.maps.Animation.BOUNCE);
    setTimeout (function (){marker.setAnimation(null);}, 750);
  });

  google.maps.event.addDomListener(li, "mouseout", function(){
    google.maps.event.trigger(marker, "mouseout");
  });

}


}


 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() {}
4

0 回答 0