0

我是谷歌地图的新手，我需要将谷歌地图视图保存到数据库中（long + lat +zoom）。我知道 MVC，但我不知道当它显示在视图上时如何获取谷歌地图视图信息（长 + 纬度 + 缩放）。

另外，当我从数据库中检索数据时，如何在剃刀视图中更改谷歌地图的视图？

非常感谢任何帮助，包括对阅读的一些参考。

我正在考虑这样做的一种方法是创建三个隐藏输入，当用户使用地图和更改谷歌地图视图时，它们的值会发生变化。但我不知道如何使用 JS 和谷歌地图来做到这一点。

4

1 回答 1

2

假设您的代码中有模型 Map，例如：

    public class MapModel
{
    /// <summary>
    /// Lattitude on map
    /// </summary>
    public decimal Lat { get; set; }

    /// <summary>
    /// Longtidute on map
    /// </summary>
    public decimal Lon { get; set; }

    /// <summary>
    /// Map zoom level
    /// </summary>
    public int Zoom { get; set; }
}

将 Google Maps 脚本放在您的视图中：

<head runat="server">
<title>Index</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

  function initialize()
  {
    var mapDiv = document.getElementById('MapDiv');
    var map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(<%= Model.Lat %>, <%= Model.Lon %>),
      zoom: <%= Model.Zoom %>,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    google.maps.event.addListener(map, 'click', function(event)
    {
        // Puts coordinates to form (then pass to DB using Ajax, etc)
        document.getElementById("Lat").value = event.latLng.lat();
        document.getElementById("Lon").value = event.latLng.lng();
        document.getElementById("Zoom").value = map.getZoom();
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);


<div id="MapDiv" style="width: 500px; height: 500px"></div>
<input type="text" id="Lat" value="0" /><br />
<input type="text" id="Lon" value="0" /><br />
<input type="text" id="Zoom" value="0" /><br />
于 2012-06-10T10:50:34.747 回答