65.9K
CodeProject 正在变化。 阅读更多。
Home

在 MVC 4 中使用带有自定义信息窗口的 Google Maps

DataBytzAI
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.82/5 (74投票s)

2013年8月1日

CPOL

4分钟阅读

viewsIcon

229428

downloadIcon

13560

一个关于在 MS MVC 4 中使用 Google Maps 的快速教程。

引言

我最近在研究在一个 Web 应用程序中使用 Google 地图，但没有找到一个清晰的示例来说明如何在 MVC 4 中实现。希望这篇文章可以填补这个空白！使用的技术包括 MS C# MVC 4、jQuery，当然还有 Google Maps API。

背景

在将这些内容整合在一起时，我遇到了一些“陷阱”。首先是（至少对我来说），使用 jQuery 选择器来链接我的包含 Google 地图的 div 行不通。我必须专门使用 JavaScript document.getelementById 调用。第二个是尺寸问题。使用默认尺寸（非常小）对我来说不够用，所以我增加了宽度/高度。结果发现 Google 地图不太喜欢这样。经过一番研究，我发现一个帖子说要创建一个快速的页面内样式，将最大宽度设置为“none”……然后它就起作用了。

Using the Code

创建一个新的 MVC 4 项目 - 这将默认包含您运行本教程所需的所有 jQuery 和其他支持文件的正确链接。

我们所做的所有工作都在“Index view”中 - 因此转到该文件并清除您不需要的任何 HTML 等。

在文件顶部添加对 Google Maps API 的脚本引用

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

在该位置附近（或者如果您愿意，在外部样式表中），添加此调整以确保地图及其控件正确调整大小

<style> #map_canvas img{max-width:none} </style>

这是我放入的另一段 CSS - 用于设置弹出 infoWindow 的样式（可选），当有人单击地图标记时。

<style>
    .infoDiv {
    height: 200px;    
    width: 300px; 
    -webkit-user-select: none; 
    background-color: white; 
}  </style>

在我们放入脚本代码本身之前，我们需要创建一个 Razor "SECTION" 来包围代码。这样做的原因是让 MVC 管理脚本在输出 HTML 文件中的位置。这对于确保以正确的顺序加载内容非常重要。

如果您查看*view*文件夹，您会看到一个名为“Shared”的文件夹 - 其中包含“_Layout.cshtml”。 这是 Index 视图页面的父包装器。 在底部，您会注意到这两行

@Scripts.Render("~/bundles/jquery") 
@RenderSection("scripts", required: false)

这告诉 Razor 引擎“渲染/加载所有 jQuery 文件，然后在完成后，输出任何标记为“scripts”的部分。

让我们回到我们的视图索引页面并添加一个节包装器

@section scripts { 
<section class="scripts">  
   <script type="text/javascript">
// our code will go in here...
   </script>
</section>}

现在是让魔法发生的代码

<!-- This code tells the browser to execute the "Initialize" method 
         only when the complete document model has been loaded. -->
$(document).ready(function () {
    Initialize(); 
});

大多数人已经知道，以上是 jQuery 代码，它告诉浏览器仅在整个文档模型加载完成后才执行 Initialize 方法。 这确保 JavaScript 不会尝试触发或访问尚未创建的对象。

initialize 是执行所有工作的主要方法

function Initialize() {

Google 在某种程度上调整了他们的界面 - 这告诉 API 使用新的 UI。

google.maps.visualRefresh = true;
var Liverpool = new google.maps.LatLng(53.408841, -2.981397);

这些选项设置了初始缩放级别，地图在全球范围内居中以启动，以及要显示的地图类型

var mapOptions = {
    zoom: 14,
    center: Liverpool,
    mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
};

这使具有 id map_canvas 的 div 成为 Google 地图。

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

这显示了添加一个简单的图钉“marker” - 这恰好是利物浦的泰特美术馆！

var myLatlng = new google.maps.LatLng(53.40091, -2.994464);
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Tate Gallery'
});

您可以使标记具有不同的颜色……在 Google 上搜索一下！

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

利物浦（英国）旅游地点的 JSON 编码数据示例列表。 您可以创建一个 JSON 列表服务器端，也可以使用 JSONResult 从控制器调用它。

var data = [
  { "Id": 1, "PlaceName": "Liverpool Museum", 
    "OpeningHours":"9-5, M-F","GeoLong": "53.410146", 
    "GeoLat": "-2.979919" },
  { "Id": 2, "PlaceName": "Merseyside Maritime Museum ", 
    "OpeningHours": "9-1,2-5, M-F", "GeoLong": 
    "53.401217", "GeoLat": "-2.993052" },
  { "Id": 3, "PlaceName": "Walker Art Gallery", 
    "OpeningHours": "9-7, M-F", "GeoLong": 
    "53.409839", "GeoLat": "-2.979447" },
  { "Id": 4, "PlaceName": "National Conservation Centre", 
    "OpeningHours": "10-6, M-F", "GeoLong": 
    "53.407511", "GeoLat": "-2.984683" }
];

使用 jQuery each 选择器来遍历 JSON 列表并放置标记图钉。

$.each(data, function (i, item) {
            var marker = new google.maps.Marker({
    'position': new google.maps.LatLng(item.GeoLong, item.GeoLat),
    'map': map,
    'title': item.PlaceName
});

将标记图钉设为蓝色！

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png')

放入有关每个 JSON 对象的一些信息 - 在这种情况下，是开放时间。

var infowindow = new google.maps.InfoWindow({
    content: "<div class='infoDiv'><h2>" + 
      item.PlaceName + "</h2>" + "<div><h4>Opening hours: " + 
      item.OpeningHours + "</h4></div></div>"
});

最后，将 OnClick 侦听器连接到地图，以便在单击标记图钉时弹出信息窗口！

google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    })
}

这就是全部内容！... 按 F9 运行，没有更多内容可看，继续前进，地图上的开放时间 :)

（PS：如果您发现本文有用或下载了代码，请在下面给个评分来告诉我！）

历史

  • 2013 年 8 月 1 日 - 发布了第 1 版，添加了图像
  • 2013 年 8 月 3 日 - 添加了源代码
  • 2013 年 8 月 7 日 - 删除了错误的格式显示标签
  • 2013 年 8 月 9 日 - 添加了相关的搜索标签
© . All rights reserved.