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

[英]Google maps marker tooltip not working correctly, mvc 4


I have a bit of a problem with my Google map. I know the problem is to do with the loop and would like some info on a better way to tackle the problem

我的谷歌地图有点问题。我知道问题是关于循环,并希望有一些更好的方法来解决问题

So let me being by painting you a picture; I have a map displaying locations via lat/lng (pulled from the database). These markers have an addlistener attached to them that allows you to click them to bring up information, the problem is, when I click on any of the markers the tooltip will focus on the last item added to the map and bring up that markers' information. Which is ludicrous! (not the rapper)

让我为你画一幅画;我有一个地图通过lat / lng显示位置(从数据库中提取)。这些标记附加了一个addlistener,允许您单击它们以显示信息,问题是,当我点击任何标记时,工具提示将关注添加到地图的最后一项并显示标记的信息。哪个是荒唐可笑的! (不是说唱歌手)

I want to get a hammer and knock my map back into shape, not before some wise advice from you guys. Below is the codeling.

我想得到一把锤子并将我的地图重新塑造成形状,而不是在你们提出一些明智的建议之前。下面是编码。

 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

As you can see it loops through the model and gets the relevant information to be placed on the map.

正如您所看到的那样,它遍历模型并获取相关信息以放置在地图上。

I've tried placing the listener outside of the razor loop, but this just makes it not work atall.

我已经尝试将监听器放在剃刀循环之外,但这只是让它无法正常工作。

As always, Stackoverflow, your help would be much, much appreciated.

一如既往,Stackoverflow,您的帮助将非常受欢迎。

PS. No cookies this time.

PS。这次没有饼干。

1 个解决方案

#1


1  

I think you have a confusion in how Razor/JS work together.

我认为你对Razor / JS如何协同工作感到困惑。

Remember that Razor is executed on the server side and javascript is executed on the client side, if you go to the page after it is loaded and see the source code you will see your problem. You are basically generating most of the javascript code once for each element in the model, which means that each variable will be declared several times.

请记住,Razor是在服务器端执行的,而javascript是在客户端执行的,如果你在加载后转到页面并看到源代码就会看到你的问题。您基本上为模型中的每个元素生成大部分javascript代码,这意味着每个变量将被声明多次。

What I would do (not sure if it's the best approach) is something like this:

我会做什么(不确定它是否是最好的方法)是这样的:

<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>

Another option would be to use a JSON Serializer in your Razor code, so you print the entire model as a JSON string and then just parse that in javascript instead of manually building the arrays.

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

Note that I didn't test this code so there might be some errors, but the idea is to get you on track.

请注意,我没有测试此代码,因此可能存在一些错误,但我们的想法是让您按计划进行操作。

Hope this helps.

希望这可以帮助。

关注微信公众号

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2013/03/15/865f9afbe87a1bcfcac33ec370fbc35c.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com