I am developing travel portal for India in which i want to add Google Maps of each hotel which is saved in the database. My problem is how do I create the map dynamically?
我正在为印度开发旅游门户网站,我想在其中添加保存在数据库中的每家酒店的Google地图。我的问题是如何动态创建地图?
3 个解决方案
#1
This is probably the best place to start:
这可能是最好的起点:
http://code.google.com/apis/maps/documentation/introduction.html
#2
The following is a basic example using ASP.MVC for displaying a number of Hotels on a Google Map.
以下是使用ASP.MVC在Google Map上显示多个酒店的基本示例。
The domain object is Hotel:
域名对象是酒店:
public class Hotel
{
public string Name { get; set; }
public double Longitude { get; set; }
public double Latitude { get; set; }
}
You will need a repository to get some hotel objects. Use this in the Home controller in a method called HotelsForMap():
您将需要一个存储库来获取一些酒店对象。在Home控制器中使用名为HotelsForMap()的方法:
public ActionResult HotelsForMap()
{
var hotels= new HotelRepository().GetHotels();
return Json(hotels);
}
Create a partial view for the google map. Lets call it GoogleMap. It will need to contain:
为Google地图创建部分视图。让我们称之为GoogleMap。它需要包含:
-
Reference to the google map api
参考谷歌地图api
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
-
jQuery to get Hotel objects from JSON call above
jQuery从上面的JSON调用获取Hotel对象
$(document).ready(function(){ if (GBrowserIsCompatible()) { $.getJSON("/Home/HotelsForMap", initialize); } });
$(document).ready(function(){if(GBrowserIsCompatible()){$ .getJSON(“/ Home / HotelsForMap”,initialize);}});
-
jQuery to initialise map
jQuery初始化地图
function initialize(mapData) {
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 to set markers for hotels on the map
jQuery在地图上为酒店设置标记
function setupLocationMarker(map, Hotel) { var latlng = new GLatLng(Hotel.Latitude, Hotel.Longitude); var marker = new GMarker(latlng); map.addOverlay(marker); }
function setupLocationMarker(地图,酒店){var latlng = new GLatLng(Hotel.Latitude,Hotel.Longitude); var marker = new GMarker(latlng); map.addOverlay(标记); }
Finally, you will need a view that contains the partial view above. The view will need to have a div with an id of map_canvas as that is what is referenced in the initialize function above. The view should contain the following:
最后,您需要一个包含上面部分视图的视图。视图需要有一个id为map_canvas的div,因为它是上面初始化函数中引用的。该视图应包含以下内容:
<h2>Hotels</h2>
<br />
<div id="map_canvas" style="width: 500; height: 500px">
<% Html.RenderPartial("GoogleMap"); %>
</div>
Hopefully you can use some of this, even if you are not familiar with ASP.MVC.
希望您可以使用其中一些,即使您不熟悉ASP.MVC。
#3
Check out this example: http://blog.sofasurfer.ch/2011/06/27/dynamic-google-map-markers-via-simple-json-file/
看看这个例子:http://blog.sofasurfer.ch/2011/06/27/dynamic-google-map-markers-via-simple-json-file/
It dynamically adds google map markers to a jSon file using google geocoder
它使用谷歌地理编码器动态地将谷歌地图标记添加到jSon文件
#1
This is probably the best place to start:
这可能是最好的起点:
http://code.google.com/apis/maps/documentation/introduction.html
#2
The following is a basic example using ASP.MVC for displaying a number of Hotels on a Google Map.
以下是使用ASP.MVC在Google Map上显示多个酒店的基本示例。
The domain object is Hotel:
域名对象是酒店:
public class Hotel
{
public string Name { get; set; }
public double Longitude { get; set; }
public double Latitude { get; set; }
}
You will need a repository to get some hotel objects. Use this in the Home controller in a method called HotelsForMap():
您将需要一个存储库来获取一些酒店对象。在Home控制器中使用名为HotelsForMap()的方法:
public ActionResult HotelsForMap()
{
var hotels= new HotelRepository().GetHotels();
return Json(hotels);
}
Create a partial view for the google map. Lets call it GoogleMap. It will need to contain:
为Google地图创建部分视图。让我们称之为GoogleMap。它需要包含:
-
Reference to the google map api
参考谷歌地图api
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
-
jQuery to get Hotel objects from JSON call above
jQuery从上面的JSON调用获取Hotel对象
$(document).ready(function(){ if (GBrowserIsCompatible()) { $.getJSON("/Home/HotelsForMap", initialize); } });
$(document).ready(function(){if(GBrowserIsCompatible()){$ .getJSON(“/ Home / HotelsForMap”,initialize);}});
-
jQuery to initialise map
jQuery初始化地图
function initialize(mapData) {
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 to set markers for hotels on the map
jQuery在地图上为酒店设置标记
function setupLocationMarker(map, Hotel) { var latlng = new GLatLng(Hotel.Latitude, Hotel.Longitude); var marker = new GMarker(latlng); map.addOverlay(marker); }
function setupLocationMarker(地图,酒店){var latlng = new GLatLng(Hotel.Latitude,Hotel.Longitude); var marker = new GMarker(latlng); map.addOverlay(标记); }
Finally, you will need a view that contains the partial view above. The view will need to have a div with an id of map_canvas as that is what is referenced in the initialize function above. The view should contain the following:
最后,您需要一个包含上面部分视图的视图。视图需要有一个id为map_canvas的div,因为它是上面初始化函数中引用的。该视图应包含以下内容:
<h2>Hotels</h2>
<br />
<div id="map_canvas" style="width: 500; height: 500px">
<% Html.RenderPartial("GoogleMap"); %>
</div>
Hopefully you can use some of this, even if you are not familiar with ASP.MVC.
希望您可以使用其中一些,即使您不熟悉ASP.MVC。
#3
Check out this example: http://blog.sofasurfer.ch/2011/06/27/dynamic-google-map-markers-via-simple-json-file/
看看这个例子:http://blog.sofasurfer.ch/2011/06/27/dynamic-google-map-markers-via-simple-json-file/
It dynamically adds google map markers to a jSon file using google geocoder
它使用谷歌地理编码器动态地将谷歌地图标记添加到jSon文件