Google 地图未显示在 Kendo 弹出式编辑器中

Question

我正在使用 Kendo ASP.NET 处理用户信息弹出窗口 window。弹出窗口还有使用 @Html.Kendo().TabStrip().

创建的选项卡

到目前为止，显示和输入数据工作正常。但是，我在将地图添加到弹出式编辑器时遇到了问题。

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

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()}

然后为弹出窗口添加了这个示例模板脚本 window。为了简单起见，删除所有其他内容

<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);
  }

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

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

Google 地图未显示在 Kendo 弹出式编辑器中

Google Map isn't show on Kendo Popup Editor

javascript

google-maps

google-maps-api-3

kendo-asp.net-mvc

kendo-ui-mvc