Google地图标记工具提示无法正常工作，mvc 4

Question

我的Google地图存在一些问题。我知道问题是关于循环，并希望有更好的方式来解决问题的一些信息

因此，让我为你画一幅画;我有一个地图显示位置通过纬度/经度（从数据库拉）。这些标记有一个附加到他们的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。这次没有Cookie。

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序列，让你打印整个模型一个JSON字符串，然后在javascript中解析，而不是手动构建数组。

请注意，我没有测试这个代码，所以可能会出现一些错误，但这个想法是让你走上正轨。

希望这会有所帮助。