2012-05-22 2 views
0

Я трепка голову над кодом здесь, http://www.michiganwxsystem.com/tropics/active.htmlGoogle Maps API v3, несколько пользовательских маркеров, с различными информационными окнами

function initialize() { 
var myLatlng = new google.maps.LatLng(19.09, -99.09); 
var myOptions = { 
zoom: 3, 
center: myLatlng, 
mapTypeId: google.maps.MapTypeId.HYBRID 
} 

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

var invest = new google.maps.MarkerImage("http://images.michiganwxsystem.com/symbols/invest.png", 
new google.maps.Size(19, 22), 
new google.maps.Point(0,0), 
new google.maps.Point(9, 11)); 

var tdimage = new google.maps.MarkerImage("http://images.michiganwxsystem.com/symbols/td.png", 
new google.maps.Size(19, 22), 
new google.maps.Point(0,0), 
new google.maps.Point(9, 11)); 

var tsimage = new google.maps.MarkerImage("http://images.michiganwxsystem.com/symbols/ts.png", 
new google.maps.Size(19, 22), 
new google.maps.Point(0,0), 
new google.maps.Point(9, 11)); 

var h1image = new google.maps.MarkerImage("http://images.michiganwxsystem.com/symbols/h1.png", 
new google.maps.Size(19, 22), 
new google.maps.Point(0,0), 
new google.maps.Point(9, 11)); 
var h2image = new google.maps.MarkerImage("http://images.michiganwxsystem.com/symbols/h2.png", 
new google.maps.Size(19, 22), 
new google.maps.Point(0,0), 
new google.maps.Point(9, 11)); 
var h3image = new google.maps.MarkerImage("http://images.michiganwxsystem.com/symbols/h3.png", 
new google.maps.Size(19, 22), 
new google.maps.Point(0,0), 
new google.maps.Point(9, 11)); 
var h4image = new google.maps.MarkerImage("http://images.michiganwxsystem.com/symbols/h4.png", 
new google.maps.Size(19, 22), 
new google.maps.Point(0,0), 
new google.maps.Point(9, 11)); 
var h5image = new google.maps.MarkerImage("http://images.michiganwxsystem.com/symbols/h5.png", 
new google.maps.Size(19, 22), 
new google.maps.Point(0,0), 
new google.maps.Point(9, 11)); 



var all = [[ "Tropical Storm Alberto","9", "2100 UTC MON MAY 21 2012", "1006","EAST","7","34.8", "30.5","-77.9","tsimage"], 
[ "Tropical Depression Two-e","4", "2100 UTC MON MAY 21 2012", "1005","WESTNORTHWEST","5.2","30.4", "9.6","-101.0","tdimage"], 
[ "Tropical Storm Three","3", "2100 GMT MON MAY 21 2012", "N/A","NORTHWEST","8","35", "12.4","144.4","tsimage"], 
]; 
var infoWindow = new google.maps.InfoWindow; 
function infoCallback(infowindow, marker) { 
     return function() { 
     infowindow.open(map, marker); 
     }; 
    } 
    function setMarkers(map, all) { 
     for (var i in all) {            
     var name = all[i][0]; 
     var adv = all[i][1]; 
     var advdate  = all[i][2]; 
     var press = all[i][3]; 
     var mvt  = all[i][4]; 
     var speed = all[i][5]; 
     var maxwind  = all[i][6]; 
     var lat = all[i][7]; 
     var lng = all[i][8]; 
     var mapicon = all[i][9]; 
     var latlngset; 
     latlngset = new google.maps.LatLng(lat, lng); 

     var marker = new google.maps.Marker({ 
    position: latlngset, 
    map: map, 
    icon: mapicon , 
    draggable: false, 
    }); 


     var content = '<div class="info"> ' + name + 
'<div style="text-align:left; font-size:.77em;">Adv# ' + adv + ' Date ' + advdate + '<br />' + 
'Pressure: ' + press + '<br />' + 
'Movement: ' + mvt + ' @ ' + speed + '<br />' + 
'Winds: ' + maxwind + ' </div></div>';  


     var infowindow = new google.maps.InfoWindow(); 
      infowindow.setContent(content); 
      google.maps.event.addListener(marker,'click',infoCallback(infowindow, marker) 
     ); 
     } 
    } 

    // Set all markers in the all variable 
    setMarkers(map, all); 
    }; 





    google.maps.event.addDomListener(window, 'load', initialize); 

кто-нибудь есть какие-либо идеи-х, Если удалить пользовательский значок, и используйте нажимной штифт по умолчанию он работает, , но это не то, что я ищу ..

ответ

1

Если вы отладить программу, вставив в цикле временного console.info(mapicon);, вы увидите, что переменная mapicon является строкой (имеет значения «tsimage», «tdimage» и «tsimage»). Другими словами, mapicon: не переменная типа google.maps.MarkerImage, но она должна быть.

Измените переменную var all и измените «tsimage» на tsimage (удалите кавычки, так что это не строка), поэтому он указывает на вашу предыдущую переменную. Нечто (сокращенный вариант), как это:

var all = [ 
    [ 
     "Tropical Storm Alberto" 
     ... 
     "30.5", 
     "-77.9", 
     tsimage 
    ], 
... 

Смотрите эту jsfiddle для рабочего примера: http://jsfiddle.net/RjDDg/

+0

Бинго .... Спасибо никогда бы не думали об удалении цитат – user1409054

+0

Кроме того, извините, я всегда предполагаем, веб-разработчики используют Firefox с firebug. Или, по крайней мере, Chrome, поскольку у них есть функции отладки консоли. – pp19dd

Смежные вопросы