谷歌地图未显示在剑道弹出编辑器上

Question

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

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

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

Location.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 中添加按钮并在单击按钮时初始化地图。

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

Answer 1

看看我设置的这个道场

Google Maps on pop up

强调我所做的。

注意：您需要在 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到网格的编辑功能。 因此，当显示弹出窗口时，这将在显示窗口之前被触发并将其初始化为您需要的任何内容。

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