C# 用于asp.net mvc 3的谷歌地图

我正在寻找整合谷歌地图到我的asp.NETMVC3网站

我找到了一些asp.net webforms的链接，但没有找到asp.net mvc 3的链接？

---

有人能给我发个链接或代码示例吗？

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

将此javascript添加到页面标题（我假设您已经添加了JQuery）：

然后将此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>

函数初始化（）{
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（函数（）{initialize（）；}）；

---

注意纬度和经度是如何来自模型的，视图写入javascript。

您正在从模型传递数据，对吗？如果我想从我的sql数据库传递数据呢？我该怎么办？我总是遇到编译错误。 “CS1061:'System.Collections.Generic.IEnumerable'不包含'longitude'的定义，并且找不到接受'System.Collections.Generic.IEnumerable'类型的第一个参数的扩展方法'longitude'（是否缺少using指令或程序集引用？）

这是我的密码。 @模型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>

@{
ViewBag.Title=“MVC 3和谷歌地图”；
}
@节脚本{
}
@节样式{
html{高度：80%}
正文{高度：80%；边距：0px；填充：0px}
#地图画布{高度：80%}
}
你好，谷歌地图
函数初始化（）{
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”），选项）；
//google.maps.event.trigger（映射，'resize'）；
}
$（函数（）{
初始化（）；
}); 

如果我只想输入streetname、郊区和国家，这将如何工作？请使用地理编码API

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