Question

我使用谷歌地图显示详细信息。当我单击该标记图标信息窗口打开时。我在信息窗口中显示了一些值，但是当我点击它没有传递值时，我该如何解决这个问题。

当我点击信息窗口获取按钮时，它应该传递该特定值。

// Our markers
markers1 = [
  ['0', 'Madivala', 12.914494, 77.560381, 'car', 'as12'],
  ['1', 'Majestic', 12.961229, 77.559281, 'third', 'as13'],
  ['2', 'Ecity', 12.92489905, 77.56070772, 'car', 'as14'],
  ['3', 'Jp nagar', 12.91660662, 77.52047465, 'second', 'as15']
];

/**
 * Function to init map
 */

function initialize() {

  var goo = google.maps,
    gmarkers1 = [],
    map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 11,
      center: new google.maps.LatLng(12.9667, 77.5667),
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      noClear: true
    }),
    card = document.getElementById('infocard'),
    types = document.getElementById('type');
  //drawcard and select as map-controls
  map.controls[goo.ControlPosition.RIGHT_BOTTOM].push(card);
  map.controls[goo.ControlPosition.TOP_LEFT].push(types);


  for (i = 0; i < markers1.length; i++) {
    addMarker(markers1[i]);
  }

  google.maps.event.addDomListener(types, 'change', function() {
    filterMarkers(this.value);
  });


  /**
   * Function to add marker to map
   */

  function addMarker(marker) {
    var category = marker[4];
    var title = marker[1];
    var pos = new google.maps.LatLng(marker[2], marker[3]);
    var content = marker[1];
    var fullContent = marker.slice(1, 6).join();

    var marker1 = new google.maps.Marker({
      title: title,
      position: pos,
      category: category,
      map: map
    });

    gmarkers1.push(marker1);

    // Marker click listener
    google.maps.event.addListener(marker1, 'click', (function(marker1, idx, markers1) {
      return function() {
        var compiled = '<div><div>' +
          markers1[idx][0] +
          '</div><div>' +
          markers1[idx][1] + ' </div><div>' +
          markers1[idx][2] + ' </div><div>' +
          '<button onclick="getid(markers1[' + i +
          '][5])">Get</button></div></div>';


        map.panTo(this.getPosition());
        map.setZoom(15);
        //set content of card 
        card.innerHTML = compiled;
        //show card
        card.style.display = 'block';
        //store marker as property of the card
        card.marker = this;
      }
    })(marker1, i, markers1));
  }
function getid(id)
{
console.log(id);
}
  /**
   * Function to filter markers by category
   */

  filterMarkers = function(category) {
    for (i = 0; i < gmarkers1.length; i++) {
      var marker = gmarkers1[i],
        visible = (marker.category == category || category.length === 0);

      marker.setVisible(visible);
      if (card.marker === marker) {
        //show the card when current marker is visible
        //and the card shows info of the currentmarker
        card.style.display = (visible) ? 'block' : 'none';
      }
    }
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}
#infocard {
  background: tomato;
  padding: 8px;
  border: 1px solid #000;
  border-radius:4px;
  display: none;
  margin:4px;
}

<div id="map-canvas">
  <div id="infocard"></div>
  <select id="type">
    <option value="">Please select category</option>
    <option value="second">second</option>
    <option value="car">car</option>
    <option value="third">third</option>
  </select>
</div>

Answer 1

我的小提琴中出现javascript错误：Uncaught ReferenceError: getid is not defined。必须在全局范围中定义getid函数，以便在HTML单击事件处理程序中使用它。

一旦我确定它正在尝试访问markers1[4][5]，您需要在函数闭包内使用idx而不是i。

updated fiddle

代码段

// Our markers
var markers1 = [
  ['0', 'Madivala', 12.914494, 77.560381, 'car', 'as12'],
  ['1', 'Majestic', 12.961229, 77.559281, 'third', 'as13'],
  ['2', 'Ecity', 12.92489905, 77.56070772, 'car', 'as14'],
  ['3', 'Jp nagar', 12.91660662, 77.52047465, 'second', 'as15']
];
var gmarkers1 = [];
/**
 * Function to init map
 */

function initialize() {

  var goo = google.maps,
    gmarkers1 = [],
    map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 11,
      center: new google.maps.LatLng(12.9667, 77.5667),
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      noClear: true
    }),
    card = document.getElementById('infocard'),
    types = document.getElementById('type');
  //drawcard and select as map-controls
  map.controls[goo.ControlPosition.RIGHT_BOTTOM].push(card);
  map.controls[goo.ControlPosition.TOP_LEFT].push(types);


  for (i = 0; i < markers1.length; i++) {
    addMarker(markers1[i]);
  }

  google.maps.event.addDomListener(types, 'change', function() {
    filterMarkers(this.value);
  });


  /**
   * Function to add marker to map
   */

  function addMarker(marker) {
    var category = marker[4];
    var title = marker[1];
    var pos = new google.maps.LatLng(marker[2], marker[3]);
    var content = marker[1];
    var fullContent = marker.slice(1, 6).join();

    var marker1 = new google.maps.Marker({
      title: title,
      position: pos,
      category: category,
      map: map
    });

    gmarkers1.push(marker1);

    // Marker click listener
    google.maps.event.addListener(marker1, 'click', (function(marker1, idx, markers1) {
      return function() {
        var compiled = '<div><div>' +
          markers1[idx][0] +
          '</div><div>' +
          markers1[idx][1] + ' </div><div>' +
          markers1[idx][2] + ' </div><div>' +
          '<button onclick="getid(markers1[' + idx +
          '][5])">Get</button></div></div>';


        map.panTo(this.getPosition());
        map.setZoom(15);
        //set content of card 
        card.innerHTML = compiled;
        //show card
        card.style.display = 'block';
        //store marker as property of the card
        card.marker = this;
      }
    })(marker1, i, markers1));
  }

  /**
   * Function to filter markers by category
   */

  filterMarkers = function(category) {
    for (i = 0; i < gmarkers1.length; i++) {
      var marker = gmarkers1[i],
        visible = (marker.category == category || category.length === 0);

      marker.setVisible(visible);
      if (card.marker === marker) {
        //show the card when current marker is visible
        //and the card shows info of the currentmarker
        card.style.display = (visible) ? 'block' : 'none';
      }
    }
  }
}

function getid(id) {
  console.log(id);
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}
#infocard {
  background: tomato;
  padding: 8px;
  border: 1px solid #000;
  border-radius: 4px;
  display: none;
  margin: 4px;
}

<script src="http://maps.google.com/maps/api/js"></script>
<div id="map-canvas">
  <div id="infocard"></div>
  <select id="type">
    <option value="">Please select category</option>
    <option value="second">second</option>
    <option value="car">car</option>
    <option value="third">third</option>
  </select>
</div>

谷歌地图信息窗口按钮没有传递javascript中的值？

1 个答案: