Карта Google не отображается в редакторе всплывающих окон Kendo

Я работаю над всплывающим окном с информацией о пользователе с Kendo ASP.NET. Во всплывающем окне также есть вкладки, созданные с помощью @Html.Kendo().TabStrip().

Пока что отображение и ввод данных работает нормально. Но у меня возникли проблемы с добавлением карты во всплывающий редактор.

Это пример всплывающего окна. Есть название улицы, номер улицы и т. д. Хотя Google Map еще не взаимодействует с данными, я хотел, чтобы они отображались правильно.

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 и инициализировать карту при нажатии кнопки.

Пожалуйста, помогите мне, если я что-то пропустил здесь.


google-maps javascript google-maps-api-3 kendo-asp.net-mvc kendo-ui-mvc
person Y Kim    schedule 19.05.2015    source источник
comment
Почему нет закрывающего тега для вашего <div> внутри содержимого TabStrip?   -  person ataravati    schedule 20.05.2015
comment
ataravati, для ‹div› есть закрывающий тег. Я просто пропустил это, когда скопировал свой код.   -  person Y Kim    schedule 20.05.2015

Ответы (1)


arrow_upward
1
arrow_downward

взгляните на это додзё, которое я создал

Карты Google во всплывающем окне

чтобы подчеркнуть то, что я сделал.

Примечание. Вам потребуется добавить ключ 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, который Google обычно демонстрирует, до функции редактирования сетки. Поэтому, когда отображается всплывающее окно, оно будет запущено до того, как окно будет показано, и инициализирует его тем, что вам нужно.

если вам нужна дополнительная помощь, дайте мне знать.

person David Shorthose    schedule 20.05.2015
comment
Я ценю ваши ответы. Во-первых, у меня есть собственный ключ API, но я не хотел делиться им в этом посте. Так что это не проблема, потому что он работает с одним html-файлом, который я создал для целей тестирования; однако не во всплывающем окне кендо. - person Y Kim; 20.05.2015
comment
Я понимаю, что не делюсь ключом API, поскольку я тестировал код с помощью своего ключа API и удалил его из додзё. Если вы скопировали и вставили свой API-ключ в додзе, он работал должным образом? (или просто скопируйте и вставьте код в новое додзё, и тогда вы сможете убедиться, что он работает). Для вашего сценария я бы предложил вам создать шаблон редактора для сетки, а затем вы можете добавить собственный код. если вам нужен пример, я могу добавить его в свой ответ для вас. - person David Shorthose; 20.05.2015
comment
Во-вторых, каким-то образом функция обработки событий вызывала сбои при автоматическом изменении размера всплывающих окон. Поэтому я использую метод для вызова всплывающего редактора @(Html.Kendo().Grid<ICWeb.Models.GeoLocation>().Name("GeoLocation").Editable(editable => editable.Mode(GridEditMode.PopUp)) По вашему предложению я добавил .Events(e => e.Edit("initialize")) теперь во всплывающем окне отображается карта Google. Спасибо! - person Y Kim; 20.05.2015
comment
Вы прокомментировали до того, как я разместил свой комментарий выше. Когда я вставил свой ключ API в додзё, карта работает. Я хотел бы узнать, что вы упомянули в своем комментарии. Не могли бы вы привести пример для меня? - person Y Kim; 20.05.2015
comment
Итак, вам все еще нужен пример или вы уже исправили свою проблему? Если вы уже решили свою проблему, и мой ответ помог, пожалуйста, отметьте его как ответ. Если есть что-то еще, что вам нужно добавить, дайте мне знать, и я обновлю ответ. - person David Shorthose; 21.05.2015