0

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。今回はクッキーはありません。

4

1 に答える 1

1

Razor/JS がどのように連携するかについて混乱していると思います。

Razor はサーバー側で実行され、javascript はクライアント側で実行されることに注意してください。ロード後にページに移動してソース コードを確認すると、問題が発生することがわかります。基本的に、モデル内の要素ごとにほとんどの JavaScript コードを 1 回生成します。つまり、各変数は複数回宣言されます。

私がすること（それが最善のアプローチかどうかはわかりません）は次のようなものです：

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

もう 1 つのオプションは、Razor コードで JSON シリアライザーを使用することです。そのため、モデル全体を JSON 文字列として出力し、配列を手動で構築する代わりに、それを JavaScript で解析するだけです。

このコードはテストしていないため、エラーが発生する可能性がありますが、問題を解決するためのものです。

お役に立てれば。

于 2013-03-15T16:25:15.203 に答える