googlemaps for asp.net mvc 3答案

【问题标题】：googlemaps for asp.net mvc 3googlemaps for asp.net mvc 3
【发布时间】：2011-09-13 11:18:54
【问题描述】：

我希望将 googlemaps 集成到我的 asp.net mvc 3 网站中？

我找到了一些 asp.net webforms 的链接，但没有找到 asp.net mvc 3 的链接？谁能给我一个链接或代码示例？

【问题讨论】：

【解决方案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。

【讨论】：

如果我只想输入街道名称、郊区和国家，这将如何工作？
使用地理编码 API code.google.com/apis/maps/documentation/javascript/…

【解决方案2】：

您是从模型传递数据，对吗？如果我想从我的 sql 数据库中传递数据怎么办？我该怎么办？我总是得到一个编译错误。 “CS1061：‘System.Collections.Generic.IEnumerable’不包含‘longitude’的定义，并且找不到接受‘System.Collections.Generic.IEnumerable’类型的第一个参数的扩展方法‘longitude’（你错过了吗？ using 指令还是程序集引用？)"

这是我的代码。 @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>

【讨论】：

【解决方案3】：

Google 地图都是关于 javascript，而不是关于应用程序的服务器端。您可以简单地使用 ASP.NET 版本的代码 - 重点是如何为 google-maps 创建 js 文件。

【讨论】：