0

我的谷歌地图有点问题。我知道问题与循环有关，并且想要一些有关解决问题的更好方法的信息

所以让我为你画一幅画；我有一张通过 lat/lng 显示位置的地图（从数据库中提取）。这些标记有一个附加侦听器，允许您单击它们以显示信息，问题是，当我单击任何标记时，工具提示将集中在添加到地图中的最后一项并显示该标记的信息. 这是可笑的！（不是说唱歌手）

我想拿一把锤子把我的地图敲回原形，而不是在你们提出一些明智的建议之前。下面是编码。

 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。这次没有饼干。

4

1 回答 1

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>

另一种选择是在 Razor 代码中使用 JSON 序列化程序，因此您将整个模型打印为 JSON 字符串，然后只需在 javascript 中解析它，而不是手动构建数组。

请注意，我没有测试此代码，因此可能会有一些错误，但我们的想法是让您走上正轨。

希望这可以帮助。

于 2013-03-15T16:25:15.203 回答