ASP.NET 和 JavaScript（GoogleMaps 标记到 JavaScript）答案

【问题标题】：ASP.NET and JavaScript (GoogleMaps markers to JavaScript)ASP.NET 和 JavaScript（GoogleMaps 标记到 JavaScript）
【发布时间】：2011-06-27 20:18:58
【问题描述】：

我有一个新手问题。如果在我的 asp.net 应用程序中，我需要查询数据库并获取一组 Google 标记以显示在地图上。我是 Web 开发的新手，所以我不确定如何将数据从 asp.net 传递到 JavaScript。它是通过从 JavaScript 调用的 WebService 完成的，还是有其他方法可以做到的？我可能误解了一些主要概念。同样，有没有办法将数据从 JavaScript 传递到 asp.net 应用程序（例如，谷歌地图上有一些东西，数据应该存储到后端的数据库中）。如果这太基本了，任何链接将不胜感激。谢谢！

【问题讨论】：

标签： javascript asp.net google-maps

【解决方案1】：

好吧，我就是这样做的（仅供参考，这在很大程度上依赖于 JQuery javascript 库）：

声明您的<div> 将显示您的地图。
使用 $(document).ready() 处理程序等待 DOM 加载完成以开始您的请求
对 WCF 或 ASMX Web 服务使用异步 JQuery $.ajax 调用，返回代表标记数据的 JSON。

这里是一些代码的粗略：

... your web page

<script>
$(document.)ready(function() {

$.ajax(

 url: "mapquery.asmx",
 async: true,
 dataType: json,
 success: function(data)
 {
    var map = new GMap2(document.getElementById("map_div"));
    for (int i = 0; i < data.length; i++)
    {
       var point = new GLatLng(data.results[i].lat,
                               data.results[i].lng);
       var marker = createMarker(point, data.results[i].desc, 
                                 data.results[i].type);
       map.addOverlay(marker);
    }
 }
);

});
</script>

从 mapquery.asmx 返回的示例 json：

results = [ {
      lat: 41.765,
      lng: 80.572
      desc: "My house",
      type: "X"
   },
   {
      lat: 42.765,
      lng: 81.572
      desc: "Friend's house",
      type: "X"
   }
]

【讨论】：

谢谢！这是（WebService/WCF）JavaScript 从 asp.net 获取数据的一种更可取的方式吗？还有其他方法吗（仅使用网络方法）？
请留意新的 WCF Web API (wcf.codeplex.com/wikipage?title=WCF%20HTTP)。听起来这将是前进的首选方法，但您也可以使用普通的旧 ASHX 处理程序文件并返回手工制作的 JSON，或使用现有的 WCF 支持（参见此处：stackoverflow.com/questions/2086666/…）

【解决方案2】：

您可以使用以下内容：

function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(43.104135, -77.884455), 6);
    // Change this depending on the name of your PHP file
    GDownloadUrl("generateXML.aspx", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");       
          for (var i = 0; i < markers.length; i++) {
            var desc = htmlEntities(markers[i].getAttribute("desc"));   
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, desc, type);
            map.addOverlay(marker);
          }
    });
}

在 generateXML.aspx 中，发送一个 XML 响应，它应该像魅力一样工作。

【讨论】：