0

私はフュージョンテーブルマップに取り組んでいます。カスタム マーカーと情報ウィンドウを追加しようとしていますが、マーカーと情報ウィンドウを表示するのに問題があります。順序が間違っているか、見つけられない構文エラーがいくつかあると思います。私はその過程で少し混乱しました。助けていただければ幸いです。

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

1 に答える 1

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

作業例（デフォルトのアイコン付き）

于 2013-07-02T22:01:03.897 に答える