0

我已经拼凑了一个脚本，该脚本显示带有侧边栏的融合地图：

  <script type="text/javascript">
  google.load('visualization', '1', {'packages':['table']});
  var map;
  var markers = [];
  var infoWindow = new google.maps.InfoWindow();

  function initialize() {
    var us = new google.maps.LatLng(38.24676420846342, -94.82073772499997);

    map = new google.maps.Map(document.getElementById('map_canvas'), {
     center: us,
     zoom: 4,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   });


//info window to contain link to map marker Sales Region, rep name, rep contact and contact email 
//sidebar contains rep name and rep contact
    var sql = encodeURIComponent("SELECT 'State - Sales Region', 'Representative Name', 'Representative Contact', 'Contact Email', Lat, Lon FROM 555 ORDER BY 'State - Sales Region'");
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + sql);

    query.send(getData);
  }

  function getData(response) {
    var dt = response.getDataTable();  

    var side_html = '<table style="border-collapse: collapse" border="1" \
                       cellpadding="5"> \
                       <thead> \
                         <tr style="background-color:#e0e0e0"> \
                           <th>Area</th> \
                           <th>Name</th> \
                         </tr> \
                       </thead> \
                       <tbody>';

    for (var i = 0; i < dt.getNumberOfRows(); i++) {
      var lat = dt.getValue(i,4);
      var lng = dt.getValue(i,5);
      var area = dt.getValue(i,0);
      var name = dt.getValue(i,2);
      var company = dt.getValue(i,1);
      var contact = dt.getValue(i,3);
      var pt = new google.maps.LatLng(lat, lng);
      var html = "<strong>" + area + "</strong><br />" + company + "<br />" + name + "<br /><a href='mailto:" + contact + "'>" + contact + "</a>";

      side_html += '<tr> \
                      <td><a href="javascript:myclick(' + i + ')">' + area + '</a></td> \
                      <td>' + name + '</td> \
                    </tr>';

      createMarker(pt, html);

    }

    side_html += '</tbody> \
                </table>';
    document.getElementById("side_bar").innerHTML = side_html;
  }

//use simple default marker
function createMarker(point,info) {  
  var marker = new google.maps.Marker({
      position: point,
      map: map
     });
    }
    markers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
      infoWindow.close();
      infoWindow.setContent(info);
      infoWindow.open(map,marker); 
    });

    google.maps.event.addListener(marker, 'onChange', function() {
      infoWindow.close();
      infoWindow.setContent(info);
      infoWindow.open(map,marker); 
    });
  }

  function myclick(num) {
    google.maps.event.trigger(markers[num], "click");
    map.setCenter(markers[num].getPosition());
  }
  </script>

现在，我想在标记显示中添加一个条件。条件与下表中的联系人姓名匹配。我被困在哪里可以改变标记样式的条件。谢谢！

var image = "./beachflag_with_shadow.png";
if(contact == "Joe Smith"){
var marker = new google.maps.Marker({
      position: point,
      icon: image,
      map: map
     });     
} else {
  var marker = new google.maps.Marker({
      position: point,
      map: map
     });
    }
4

1 回答 1

0

我以为我以前试过这个，但现在它工作得很好：

只需将变量传递给 createMarker 函数：

createMarker(pt, html, contact);

    }

    side_html += '</tbody> \
                </table>';
    document.getElementById("side_bar").innerHTML = side_html;
  }

//use simple default marker
function createMarker(point,info,contact) {  
var image = "./beachflag_with_shadow.png";
if(contact == "Joe Smith"){
var marker = new google.maps.Marker({
      position: point,
      icon: image,
      map: map
     });     
} else {
  var marker = new google.maps.Marker({
      position: point,
      map: map
     });
    }
于 2013-02-19T16:32:52.323 回答