Question

我已经将一个显示带侧边栏的融合地图的脚本拼凑在一起：

  <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
     });
    }

Answer 1

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

只需将变量传递给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
     });
    }

融合表条形标记样式与侧边栏映射

1 个答案: