在开发过程中，经常需要将地图功能集成到应用程序中。本文将介绍如何使用MVC 4,jQuery和Google Maps API来实现这一功能。
在创建地图应用时，遇到了一些挑战。首先是使用jQuery选择器来链接包含Google地图的div不起作用，必须使用JavaScript的document.getElementById方法。其次是尺寸问题，使用默认尺寸（非常小）对来说不够用，所以增加了宽度和高度。结果发现Google地图对此并不满意。经过一番研究，发现了一个帖子，建议创建一个快速的内页样式，将max-width设置为"none"，然后它就可以工作了。
创建一个新的MVC 4项目，这将默认包含运行本教程所需的jQuery和其他支持文件的适当链接。
所做的所有工作都在"Index视图"中，所以去那个文件并清理掉不需要的任何HTML等。
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<style>
#map_canvas img{max-width:none}
</style>
<style>
.infoDiv {
height: 200px;
width: 300px;
-webkit-user-select: none;
background-color: white;
}
</style>
需要创建一个Razor "SECTION"来包围代码。这样做的原因是让MVC管理脚本在输出HTML文件中的位置。这很重要，以确保事情以正确的顺序加载。
$(document).ready(function() {
Initialize();
});
function Initialize() {
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
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
var myLatlng = new google.maps.LatLng(53.40091, -2.994464);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Tate Gallery'
});
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
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"
}
];
$.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');
var infowindow = new google.maps.InfoWindow({
content: ''
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
});