googlemaps для asp.net mvc 3

Question

Я хочу интегрировать googlemaps в мой веб-сайт asp.net mvc 3?

Я нашел несколько ссылок для веб-форм asp.net, но не для asp.net mvc 3? Может кто-нибудь отправить мне ссылку или пример кода?

Answer 1

Добавьте этот javascript к заголовку вашей страницы (я полагаю, вы уже добавили JQuery):

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Затем этот div в теле вашего представления:

<div id="map_canvas" style="width:200px; height:200px; "></div>

Затемдобавьте этот блок сценария для управления картой

<script type="text/javascript">
function initialize() {
    var latLng = new google.maps.LatLng(@Model.Latitude, @Model.Longitude);
    var myOptions = {zoom: 7, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
$(document).ready(function () {initialize();});
</script>

Обратите внимание на то, как широта и долгота берутся из модели, а запись вида выводится в javascript.

Answer 2

вы передаете данные из модели, верно? Что если я хочу передать данные из моей базы данных sql? Что я должен делать? Я всегда получаю ошибку компиляции. «CS1061:« System.Collections.Generic.IEnumerable »не содержит определения для« долготы », и отсутствует метод расширения« долгота », принимающий первый аргумент типа« System.Collections.Generic.IEnumerable »(вы пропустили директива использования или ссылка на сборку?) "

Вот мой код. @model IEnumerable

    @{ 
        ViewBag.Title = "MVC 3 and Google Maps"; 
    }

    @section Scripts { 
        <script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=false"></script>
    }

    @section Styles { 
        html { height: 80% } 
        body { height: 80%; margin: 0px; padding: 0px } 
        #map_canvas { height: 80% } 
    }

    <h2>Hello, Google Maps</h2>

    <div id="map_canvas" style="width:80%; height:80%"></div>

    <script type="text/javascript">

        function initialize() {
            var latlng = new google.maps.LatLng(@Model.longitude, @Model.latitude);
            var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
            var map = new google.maps.Map(document.getElementById("map_canvas"), options);
            //google.maps.event.trigger(map, 'resize');
        }

        $(function () {
            initialize();
        }); 

    </script>

Answer 3

Карты Google основаны на javascript, а не на стороне сервера вашего приложения. Вы просто можете использовать код для версии ASP.NET - главное, как создать ваши js-файлы для google-maps.