Question

我是谷歌地图的新手，我需要将谷歌地图视图保存到数据库中（长+纬度+缩放）。我知道MVC但我不知道如何在视图上显示Google Map视图信息（长+ Lat +缩放）。

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

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

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

Answer 1

假设你的代码中有模型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地图脚本：

<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 />

将Google Map视图保存并检索到mvc中的sql

1 个答案: