asp.net-mvc-3 - 動的フォームで Google マップを使用する方法

Question

MVC テンプレートを使用して、ユーザーが複数のアドレスを追加できるようにします。ボタンをクリックすると、jquery を使用してテンプレートが呼び出され、フォームが生成されます。別の場所を追加したい場合は、ボタンをもう一度クリックすると、別のフォームが設定されます。このテンプレートは正常に機能しますが、これらのテンプレート内で Google マップを使用する際に問題が発生します。

このシナリオで Google マップを使用する理由は、追加する場所の経度と緯度を追加するための優れたインターフェイスを提供するためです。画面上に任意の数のアドレス領域が存在する可能性があるため、ここでは ID の代わりにクラスを使用しています。

私の mvc テンプレートには、次のマークアップがあります。

<div class="body">
           <div class="st-form-line">   
                <span class="st-labeltext">Location</span>
                <a href="#" class="GetPosition">Get Latitude &amp; Longitude positions based on above address details.</a>
                <div class="mapContainer" style="display:none;">
                    <p>If the map position is incorrect simply drag the pointer to the correct location.</p>
                    <div class="map" style="width: 450px; height: 350px;"><br/></div>
                </div>
                <div class="clear"></div>
            </div>

            <div class="st-form-line">  
                <span class="st-labeltext">@Html.LabelFor(model => model.Address.Longitude)</span>
                @Html.EditorFor(model => model.Address.Longitude)
                @Html.ValidationMessageFor(model => model.Address.Longitude)
                <div class="clear"></div>
            </div>

            <div class="st-form-line">  
                <span class="st-labeltext">@Html.LabelFor(model => model.Address.Latitude)</span>
                @Html.EditorFor(model => model.Address.Latitude)
                @Html.ValidationMessageFor(model => model.Address.Latitude)
                <div class="clear"></div>
            </div>
</div>

私は次のjqueryを持っています(これは私に問題を与えているビットです):

$('a.GetPosition').live("click", function (evt) {
        evt.preventDefault();
        $(this).next().show();
        var mapElement = $(this).closest('.body').find('.map');
        var latElement = $(this).closest('.body').find('[id$=__Address_Latitude]');
        var longElement = $(this).closest('.body').find('[id$=__Address_Longitude]');
        showAddress(mapElement, latElement, longElement);
    });

    // Google Map
    var map;
    function showAddress(mapElement, latElement, longElement) {
        var myLatlng = new google.maps.LatLng(40.713956, -74.006653);

        var myOptions = {
            zoom: 8,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(mapElement, myOptions);

        var marker = new google.maps.Marker({
            draggable: true,
            position: myLatlng,
            map: map,
            title: "choose location"
        });

        google.maps.event.addListener(marker, 'click', function (event) {
            latElement.val(event.latLng.lat().toFixed(5));
            longElement.val(event.latLng.lng().toFixed(5));
        });
    }

今のところ、デフォルトのマップ位置 '40.713956, -74.006653' にハードコーディングしていますが、マップが正しく表示されるようになったら、実際の住所を使用するように変更します。

問題が「mapElement」にあることはわかっていますが、何が問題なのかわかりません。showAddress 関数呼び出しにコメントを付けてテキストを mapElement に出力すると、テキストが表示されるので、正しい DOM ロケーションが見つかったように見えます。

ここで試すことができるアイデアはありますか？ご協力いただきありがとうございます。

ありがとう、

リッチ

score 0 · Accepted Answer

静的な緯度と経度をロードするためのサンプルコード:

    var initialLocation = new google.maps.LatLng(40.713956, -74.006653);
    var zoom = 4;

        var options = {
            zoom: zoom,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), options);
        map.setCenter(initialLocation);
        map.setZoom(zoom);

上記の例では、div "map_canvas" に静的マップが表示されます。Google マップのもう 1 つの重要な要素、つまり Geocoder を使用することもできます。これは、Google マップに住所を描画するのに役立ちます。

var mygc = new google.maps.Geocoder();
mygc.geocode({ 'address': address },
    function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    initialLocation = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());

                    map.setCenter(initialLocation);
                    map.setZoom(zoom);
                }
            }
    );

score 0 · Accepted Answer

したがって、いくつかの調査を行った後、要素 ID を使用した場合にのみ Google マップが機能することは明らかです。クラスに渡すと機能しません。

この問題を回避するには、マップを表示するボタンがクリックされたときに、一意の ID を持つ div を動的に追加する必要がありました。

私のHTMLは次のようになります。

    <div class="body">
        <div class="st-form-line">  
                   <span class="st-labeltext">Location</span>
                   <a href="#" class="GetPosition">Get Latitude &amp; Longitude positions based on above address details.</a>
                   <div class="mapContainer" style="display:none;">
                   <p>If the map position is incorrect simply drag the pointer to the correct location.</p>
                   <p>@Html.LabelFor(model => model.Address.Longitude) @Html.EditorFor(model => model.Address.Longitude) @Html.LabelFor(model => model.Address.Latitude) @Html.EditorFor(model => model.Address.Latitude) <br /> 
                   @Html.ValidationMessageFor(model => model.Address.Longitude) @Html.ValidationMessageFor(model => model.Address.Latitude)</p><br />
                   <div class="clear"></div>
               </div>
         </div>
     </div>

JavaScript は次のようになります。

var i = 1;
    $('a.GetPosition').live("click", function (evt) {
        evt.preventDefault();
        // build up address string for map
        var address = //added my address textboxes here - removed for brevity;
        // find the map container and make it visible
        var mapContainer = $(this).next();
        mapContainer.show();
        // create a new map div with unique id
        var mapId = 'map' + i++;
        $("<div></div>").attr("id", mapId).attr("style", "width: 600px; height: 350px;").appendTo(mapContainer);
        // find the lat long textboxes and pass to the Google map function so we can populate with co-ordinates
        var latElement = $(this).closest('.body').find('[id$=__Address_Latitude]');
        var longElement = $(this).closest('.body').find('[id$=__Address_Longitude]');
        showAddress(mapId, address, latElement, longElement);
        // finally hide the button to avoid other map divs being generated
        $(this).hide();
    });
var map;
var marker;
function showAddress(mapId, address, latElement, longElement) {

    var map = new google.maps.Map(document.getElementById(mapId), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 15
    });

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': address
    },
       function (results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
               marker = new google.maps.Marker({
                   draggable: true,
                   position: results[0].geometry.location,
                   map: map
               });
               map.setCenter(results[0].geometry.location);
               latElement.val(results[0].geometry.location.lat().toFixed(5));
               longElement.val(results[0].geometry.location.lng().toFixed(5));

               google.maps.event.addListener(marker, 'dragend', function (event) {
                   latElement.val(event.latLng.lat().toFixed(5));
                   longElement.val(event.latLng.lng().toFixed(5));
               });
           }
       });
}

エラーチェックを追加する必要があるなど、上記のコードには微調整が必要なことは明らかですが、他の人が Google マップを動的フォームで操作するのに役立つことを願っています。

asp.net-mvc-3 - 動的フォームで Google マップを使用する方法

3 に答える 3

Related

Reference