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

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

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

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

1 个答案: