Инструмент подсказки маркеров Google не работает правильно, mvc 4

Question

У меня есть небольшая проблема с моей картой Google. Я знаю, что проблема связана с циклом и хотела бы получить информацию о лучшем способе решения проблемы.

Так что позвольте мне быть, рисуя вам фотографию; У меня есть карта, отображающая местоположения через lat/lng (вытащил из базы данных). Эти маркеры имеют прикрепленный к ним addlistener, который позволяет вам щелкнуть их, чтобы вызвать информацию, проблема в том, что когда я нажимаю на любой из маркеров, всплывающая подсказка будет фокусироваться на последнем элементе, добавленном на карту, и воспитывать информацию этого маркера , Что смешно! (а не рэппер)

Я хочу получить молоток и сбить карту обратно в форму, а не до того, как вам помогут некоторые мудрые советы. Ниже приводится кодирование.

function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng([REMOVED], [REMOVED]), 
      zoom: 11, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map-canvas"), 
      mapOptions); 
     // RAZOR BEGIN 

     @foreach (var item in Model) { 
<text> 
     var markerlatLng = new google.maps.LatLng(@(item.latitude), @(item.longitude)); 
     var title = '@(item.address1)'; 
     var description = '@(item.averageRating)'; 
     var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>' 

     var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
     }); 

     var marker = new google.maps.Marker({ 
      position: markerlatLng, 
      title: title, 
      map: map, 
      draggable: false 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      map.setZoom(15); 
      map.setCenter(marker.getPosition()); 
      //open a div on the mouse location? 
      infowindow.open(map, marker); 
     }); 

     </text> 
    }  
     //RAZOR END 

Как вы можете видеть, он просматривает модель и получает соответствующую информацию на карте.

Я попытался разместить слушателя вне бритвенной петли, но это просто заставляет его работать не полностью.

Как всегда, Stackoverflow, ваша помощь будет очень, очень ценится.

PS. На этот раз нет куки.

Answer 1

Я думаю, что у вас есть путаница в том, как Razor/JS работают вместе.

Помните, что Razor выполняется на стороне сервера, а javascript выполняется на стороне клиента, если вы переходите на страницу после ее загрузки и видите исходный код, вы увидите свою проблему. Вы в основном генерируете большую часть кода javascript один раз для каждого элемента в модели, а это означает, что каждая переменная будет объявлена ​​несколько раз.

Что бы я сделал (не уверен, что это лучший подход) что-то вроде этого:

<text> 
// these are javascript arrays 
var locations = []; 
var descriptions = []; 
</text> 

@* This is the razor loop *@ 
@foreach (var item in Model) { 
    <text> 
    locations.push(google.maps.LatLng(@(item.latitude), @(item.longitude))); 
    descriptions.push('<h3>@(item.address1)</h3><p>@(item.averageRating)</p>'); 
    </text> 
} 

// Now using javascript, create a loop that will create the markers and assign the listeners 
<text> 
for(var i : locations){ 

    var infowindow = new google.maps.InfoWindow({ 
     content: descriptions[i]; 
    }); 

    var marker = new google.maps.Marker({ 
     position: locations[i], 
     title: title, 
     map: map, 
     draggable: false 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     map.setZoom(15); 
     map.setCenter(marker.getPosition()); 
     //open a div on the mouse location? 
     infowindow.open(map, marker); 
    }); 
} 
</text> 

Другим вариантом было бы использовать JSON Serializer в коде Razor, так что вы печатать всю модель как строка JSON, а затем просто проанализируйте это в javascript вместо того, чтобы вручную создавать массивы.

Обратите внимание, что я не тестировал этот код, поэтому могут возникнуть некоторые ошибки, но идея состоит в том, чтобы вы на ходу.

Надеюсь, это поможет.