Question

我正在为印度开发旅游门户网站，我想在其中添加保存在数据库中的每家酒店的Google地图。我的问题是如何动态创建地图？

Answer 1

这可能是最佳起点：

http://code.google.com/apis/maps/documentation/introduction.html

Answer 2

以下是使用ASP.MVC在Google地图上显示多个酒店的基本示例。

域对象是酒店：

public class Hotel
{
    public string Name { get; set; }
    public double Longitude { get; set; }
    public double Latitude { get; set; } 
}

您需要一个存储库来获取一些酒店对象。在Home控制器中使用名为HotelsForMap（）的方法：

public ActionResult HotelsForMap()
{
    var hotels= new HotelRepository().GetHotels();
    return Json(hotels);
}

为Google地图创建部分视图。让我们称之为GoogleMap。它需要包含：

参考谷歌地图api

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>

jQuery从上面的JSON调用中获取Hotel对象

（文档）$。就绪（函数（）{ if（GBrowserIsCompatible（）） { $ .getJSON（“/ Home / HotelsForMap”，初始化）; } }）;

jQuery初始化地图

function initialize（mapData）{

var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new google.maps.SmallMapControl());
map.addControl(new google.maps.MapTypeControl());

var zoom = mapData.Zoom;
map.setCenter(new GLatLng(mapData[0].Latitude, mapData[0].Longitude), 8);

$.each(mapData, function(i, Hotel) {
    setupLocationMarker(map, Hotel);
});

}

jQuery为地图上的酒店设置标记

function setupLocationMarker（地图，酒店） { var latlng = new GLatLng（Hotel.Latitude，Hotel.Longitude）; var marker = new GMarker（latlng）; map.addOverlay（标记）; }

最后，您需要一个包含上面部分视图的视图。视图需要有一个id为map_canvas的div，因为它是上面初始化函数中引用的。该视图应包含以下内容：

<h2>Hotels</h2>
<br />
<div id="map_canvas" style="width: 500; height: 500px">
     <% Html.RenderPartial("GoogleMap"); %>
</div>

希望您可以使用其中一些，即使您不熟悉ASP.MVC。

Answer 3

看看这个例子： http://blog.sofasurfer.ch/2011/06/27/dynamic-google-map-markers-via-simple-json-file/

它使用谷歌地理编码器动态地将谷歌地图标记添加到jSon文件

如何在我的网站上添加动态Google地图？

3 个答案: