0

我正在使用 Kendo ASP.NET 处理用户信息弹出窗口。弹出窗口还具有使用创建的选项卡@Html.Kendo().TabStrip()。

到目前为止，显示和输入数据工作正常。但是，我无法将地图添加到弹出编辑器中。

这是示例弹出窗口。有街道名称、街道号码等。虽然谷歌地图还没有与数据交互，但我希望它正确显示。

位置.cshtml：

@(Html.Kendo().TabStrip()
      .Name("tabstripLocationPopup")
      .Items(tabstrip =>
      {
          tabstrip.Add().Text("Location")
              .Selected(true)
              .LoadContentFrom("", "")
              .Content(@<text>
<div id="GeoLocation" class="tab" style="overflow: auto; height: 90%;">
    <fieldset>
        <legend accesskey="I">Identification</legend>
        <table border="0" style="width: 95%; margin: 0 auto; border-collapse: collapse; border: 0px solid black;">
                    <tr>
                        <td class="label">
                            @Html.LabelFor(model => model.Lat, "Latitude")
                        </td>
                        <td class="editor">
                            @Html.Kendo().MaskedTextBoxFor(model => model.Lat).Name("Lat")
                        </td>

                        <td class="label">
                            @Html.LabelFor(model => model.Long, "Longitude")
                        </td>
                        <td class="editor">
                            @Html.Kendo().MaskedTextBoxFor(model => model.Long).Name("Long")
                        </td>
                    <tr>

            </table>
        </fieldset>
</div>
    </text>);

          })
    )

我在 index.cshtml 中添加了脚本：

<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=MyAPICode&sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
  }
</script>

如果我将此代码添加到 index.cshtml 文件中，则地图会正确显示。

<body onload="initialize()">
    <div id="map_canvas" style="width:500px; height:200px"></div>
</body>

但是，我希望它显示在弹出窗口（Location.cshtml）中。

我让它显示的唯一方法是在 Javascript 中添加按钮并在单击按钮时初始化地图。

如果我在这里遗漏了什么，请指导我。

4

1 回答 1

1

看看我设置的这个道场

谷歌地图弹出

强调我所做的。

注意：您需要在 API 开发控制台中添加您的 API 密钥并授权站点才能显示地图，否则您将收到未授权或无效密钥消息显示

我使用了 Telerik 自己的演示之一，然后添加了以下内容：

editable: {
               mode: "popup",
               template: kendo.template($("#editor").html())
          }, 
edit: function(e){ initialize()}

然后为弹出窗口添加了这个示例模板脚本。删除所有其他内容只是为了保持简单

<script id="editor" type="text/x-kendo-template">
  <div id="GeoLocation" class="tab" style="overflow: auto;width:300px; height: 300px;">
  </div>
</script>

然后像这样使用你的初始化脚本：

   function initialize() {
    var mapOptions = {
                       center: new google.maps.LatLng(-34.397, 150.644),
                       zoom: 8,
                       mapTypeId: google.maps.MapTypeId.ROADMAP
                     };
    var map = new google.maps.Map(document.getElementById("GeoLocation"),
        mapOptions);
  }

我所要做的就是移动调用此代码的位置。从google通常demo的常用OnLoad到网格的编辑功能。因此，当显示弹出窗口时，它将在窗口显示之前被触发并将其初始化为您需要的任何内容。

如果您需要任何进一步的帮助，请告诉我。

于 2015-05-20T00:25:04.370 回答