融合表映射,自定义标记和infowindow的麻烦

时间:2013-07-02 20:48:18

标签: google-maps google-maps-markers google-fusion-tables

我一直在研究融合表地图。我正在尝试添加自定义标记和infowindows但我遇到问题让它显示我的标记和infowindows。我想我有一些无序或者可能有一些我无法找到的语法错误。我对这个过程有点困惑。我将不胜感激任何帮助。

var tableId ="1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds"; // original table

google.load('visualization', '1');

var map;
var markers = [];
var infoWindow = new google.maps.InfoWindow();

function initialize() {
      var ak = new google.maps.LatLng(64.958056,-147.618333);

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

     var queryStr = "SELECT name, lat, lng, description FROM "+tableId+" ORDER BY name";
     document.getElementById('info').innerHTML += queryStr +"<br>";
     var queryText = encodeURIComponent(queryStr);
     var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

    query.send(getData);
 }

function getData(response) {
   if (!response) {
       alert('no response');
       return;
   }
  if (response.isError()) {
       alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
       return;
  } 
  var dt = response.getDataTable();  

  document.getElementById('info').innerHTML += "rows="+dt.getNumberOfRows()+"<br>";
  for (var i = 0; i < dt.getNumberOfRows(); i++) {
      var lat = dt.getValue(i,1);
      var lng = dt.getValue(i,2);
      var name = dt.getValue(i,0);
      var description = dt.getValue(i,3);
  }
  var pt = new google.maps.LatLng(lat, lng);

  var html = "<span style='font-size:13px;font-weight:bold;color:#236192;'>" + name + "</span><p style='font-size:12px;'>" + description + "</p>";

 var info = html;

}
function createMarker(pt,info) {
  var iconURL = 'uaf-icon.png';               
  var iconSize = new google.maps.Size(29,60);
  var iconOrigin = new google.maps.Point(0,0);    
  var iconAnchor = new google.maps.Point(15,60);
  var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);

  var shadowURL = 'uaf-shadow.png';           
  var shadowSize = new google.maps.Size(63, 60);
  var shadowOrigin = new google.maps.Point(0, 0); 
  var shadowAnchor = new google.maps.Point(15, 60);
  var myShadow = new google.maps.MarkerImage(shadowURL, shadowSize, shadowOrigin, shadowAnchor);

  var iconShape = [18,0,20,1,22,2,23,3,24,4,25,5,26,6,27,7,27,8,28,9,28,10,28,11,28,12,28,13,28,14,28,15,28,16,28,17,28,18,28,19,27,20,27,21,26,22,26,23,25,24,24,25,23,26,21,27,20,28,16,29,21,31,21,32,21,33,21,34,21,35,20,36,20,37,20,38,19,39,19,40,19,41,18,42,18,43,18,44,18,45,17,46,17,47,17,48,17,49,16,50,16,51,16,52,15,53,15,54,15,55,14,56,14,57,14,58,14,59,13,59,13,58,13,57,13,56,12,55,12,54,12,53,12,52,11,51,11,50,11,49,11,48,11,47,10,46,10,45,10,44,10,43,9,42,9,41,9,40,9,39,9,38,8,37,8,36,8,35,8,34,8,33,7,32,7,31,12,29,9,28,7,27,6,26,4,25,3,24,3,23,2,22,1,21,1,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,1,9,1,8,2,7,2,6,3,5,4,4,5,3,6,2,8,1,10,0,18,0];
 var myMarkerShape = {
      coord: iconShape,
      type: 'poly'
  };

 var myMarkerOpts = {
      position: point,
      map: map,
      icon: myIcon,
      shadow: myShadow,
      shape: myMarkerShape
  };

 var marker = new google.maps.Marker(myMarkerOpts);

 markers.push(marker);

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

function myclick(num) {
 google.maps.event.trigger(markers[num], "click");
}

1 个答案:

答案 0 :(得分:0)

  1. 首先使用默认标记显示地图。您没有调用createMarker函数(或创建任何标记):

    for (var i = 0; i < dt.getNumberOfRows(); i++) {
      var lat = dt.getValue(i,1);
      var lng = dt.getValue(i,2);
      var name = dt.getValue(i,0);
      var description = dt.getValue(i,3);
      var pt = new google.maps.LatLng(lat, lng);
      createMarker(pt,"<b>"+name+"</b><br>"+description);
    }
    
  2. createMarker中有一个拼写错误(函数范围内没有“point”变量,它应该是“pt”),查找并解决javascript控制台中的任何错误。

    function createMarker(pt,info) {
      var iconURL = 'uaf-icon.png';               
      var iconSize = new google.maps.Size(29,60);
      var iconOrigin = new google.maps.Point(0,0);    
      var iconAnchor = new google.maps.Point(15,60);
      var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);
    
      var shadowURL = 'uaf-shadow.png';           
      var shadowSize = new google.maps.Size(63, 60);
      var shadowOrigin = new google.maps.Point(0, 0); 
      var shadowAnchor = new google.maps.Point(15, 60);
      var myShadow = new google.maps.MarkerImage(shadowURL, shadowSize, shadowOrigin, shadowAnchor);
    
      var iconShape = [18,0,20,1,22,2,23,3,24,4,25,5,26,6,27,7,27,8,28,9,28,10,28,11,28,12,28,13,28,14,28,15,28,16,28,17,28,18,28,19,27,20,27,21,26,22,26,23,25,24,24,25,23,26,21,27,20,28,16,29,21,31,21,32,21,33,21,34,21,35,20,36,20,37,20,38,19,39,19,40,19,41,18,42,18,43,18,44,18,45,17,46,17,47,17,48,17,49,16,50,16,51,16,52,15,53,15,54,15,55,14,56,14,57,14,58,14,59,13,59,13,58,13,57,13,56,12,55,12,54,12,53,12,52,11,51,11,50,11,49,11,48,11,47,10,46,10,45,10,44,10,43,9,42,9,41,9,40,9,39,9,38,8,37,8,36,8,35,8,34,8,33,7,32,7,31,12,29,9,28,7,27,6,26,4,25,3,24,3,23,2,22,1,21,1,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,1,9,1,8,2,7,2,6,3,5,4,4,5,3,6,2,8,1,10,0,18,0];
      var myMarkerShape = {
          coord: iconShape,
          type: 'poly'
      };
    
      var myMarkerOpts = {
        position: pt,
        map: map,
        icon: myIcon,
        shadow: myShadow,
        shape: myMarkerShape */
      };
    
      var marker = new google.maps.Marker(myMarkerOpts);
    
      markers.push(marker);
    
      google.maps.event.addListener(marker, 'click', function() {
         infoWindow.close();
         infoWindow.setContent(info);
         infoWindow.open(map,marker); 
      });
    }
    
  3. working example (with default icons)