得不到财产' 0'当我点击谷歌地图标记时未定义?

时间:2015-09-19 08:47:55

标签: angularjs google-maps

当我点击谷歌地图标记时我得到错误如何解决这个问题我已经封闭了小提琴http://jsfiddle.net/cLADs/135/。当我点击按钮它应该根据标记点击一个id值来帮助我前进。



var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
    content: ''
});

// 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 center = new google.maps.LatLng(12.9667,77.5667);
    var mapOptions = {
        zoom: 12,
        center: center,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    for (i = 0; i < markers1.length; i++) {
        addMarker(markers1[i]);
    }
}

/**
 * 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, fullContent) {
        return function () {
            console.log('Gmarker 1 gets pushed');
            infowindow.setContent(fullContent);
            infowindow.open(map, marker1);
            map.panTo(this.getPosition());
            map.setZoom(15);
            
            ///////

  // Set CSS for the control border.
  var controlDiv = document.createElement("div");
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    //Do Whatever you want here
  });
  controlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);         
            ///////
        }
    })(marker1, fullContent));
}

/**
 * Function to filter markers by category
 */

filterMarkers = function (category) {
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if (marker.category == category || category.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}

// Init map
initialize();
&#13;
#map-canvas {
    width: 500px;
    height: 500px;
}
&#13;
<div id="map-canvas"></div>
<select id="type" onchange="filterMarkers(this.value);">
    <option value="">Please select category</option>
    <option value="second">second</option>
    <option value="car">car</option>
    <option value="third">third</option>
</select>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

如果你在你的听众中打印你的i,你会发现它总是为4.基本上,听众不记得数字i,因为它是一个地球变量。

查看Google Example,他们调用了一个函数并在里面设置了信息窗口。(这样它就是i独立的)你也可以这样做。

另一种解决方案是将值i作为标记存储到标记中,以便您可以从标记对象中检索它。