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>

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

请注意，我没有测试此代码，因此可能会出现一些错误，但我们的想法是让您按计划进行。

希望这有帮助。

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

1 个答案: