Ключ API Google MAP в приложении Angular

Question

Ключ API Google MAP в приложении Angular

0

У меня есть угловое приложение и вы пытаетесь добавить простую карту google на страницу. Но я получаю это:

> Google Maps API is required. Please register the following JavaScript
> library http://maps.google.com/maps/api/js?sensor=true. <div
> data-ui-view="" class="ng-scope">(anonymous function) @
> angular.js:11598$get @ angular.js:8548$ @ angular.js:8219v @
> angular.js:7726g @ angular.js:7075(anonymous function) @
> angular.js:6954k @ angular-ui-router.min.js:7k.compile @
> angular-ui-router.min.js:7$ @ angular.js:8217v @ angular.js:7726g @
> angular.js:7075g @ angular.js:7078(anonymous function) @
> angular.js:6954compile @ angular-ui-router.min.js:7$ @
> angular.js:8217v @ angular.js:7726g @ angular.js:7075(anonymous
> function) @ angular.js:6954k @ angular-ui-router.min.js:7k.compile @
> angular-ui-router.min.js:7$ @ angular.js:8217v @ angular.js:7726g @
> angular.js:7075(anonymous function) @ angular.js:6954compile @
> angular-ui-router.min.js:7$ @ angular.js:8217v @ angular.js:7726g @
> angular.js:7075(anonymous function) @ angular.js:6954k @
> angular-ui-router.min.js:7(anonymous function) @
> angular-ui-router.min.js:7$get.l.$broadcast @
> angular.js:14707x.transitionTo.x.transition.I.then.x.transition.x.transition
> @ angular-ui-router.min.js:7(anonymous function) @
> angular.js:13175$get.l.$eval @ angular.js:14388$get.l.$digest @
> angular.js:14204(anonymous function) @ angular.js:14427e @
> angular.js:4902(anonymous function) @ angular.js:5282
> js?sensor=true&_=1435321003344:8 Failed to execute 'write' on
> 'Document': It isn't possible to write into a document from an
> asynchronously-loaded external script unless it is explicitly opened.

На следующей странице приведен пример, который я загрузил с https://codeload.github.com/hpneo/gmaps/, и странно, что он работает нормально, если я просматриваю его по адресу http://myapp/directroy/map.html, но он давая мне вышеприведенную ошибку, если я хочу туда попасть через http://myapp/ng-route-to-map-page

Я попытался зарегистрировать javascript sdk по code.google.com и включить библиотеку на страницу как

Я делаю это неправильно? Я поместил туда API-ключ

<script type="text/javascript" src="http://maps.google.com/maps/api/js?&key=APIKEY"></script>

Но все равно такая же ошибка.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GMaps.js &mdash; Geometry overlays</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

  <script type="text/javascript" src="../gmaps.js"></script>
  <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="examples.css" />
  <script type="text/javascript">
    var map, rectangle, polygon, circle;
    $(document).ready(function(){
      map = new GMaps({
        el: '#map',
        lat: -12.043333,
        lng: -77.028333
      });
      var bounds = [[-12.030397656836609,-77.02373871559225],[-12.034804866577001,-77.01154422636042]];
      rectangle = map.drawRectangle({
        bounds: bounds,
        strokeColor: '#BBD8E9',
        strokeOpacity: 1,
        strokeWeight: 3,
        fillColor: '#BBD8E9',
        fillOpacity: 0.6
      });

      var paths = [[-12.040397656836609,-77.03373871559225],[-12.040248585302038,-77.03993927003302],[-12.050047116528843,-77.02448169303511],[-12.044804866577001,-77.02154422636042]];
      polygon = map.drawPolygon({
        paths: paths,
        strokeColor: '#25D359',
        strokeOpacity: 1,
        strokeWeight: 3,
        fillColor: '#25D359',
        fillOpacity: 0.6
      });
      var lat = -12.040504866577001;
      var lng = -77.02024422636042;
      circle = map.drawCircle({
        lat: lat,
        lng: lng,
        radius: 350,
        strokeColor: '#432070',
        strokeOpacity: 1,
        strokeWeight: 3,
        fillColor: '#432070',
        fillOpacity: 0.6
      });
      for(var i in paths){
        bounds.push(paths[i]);
      }
      var b = [];
      for(var i in bounds){
        latlng = new google.maps.LatLng(bounds[i][0], bounds[i][1]);
        b.push(latlng);
      }
      for(var i in paths){
        latlng = new google.maps.LatLng(paths[i][0], paths[i][1]);
        b.push(latlng);
      }
      map.fitLatLngBounds(b);
    });
  </script>
</head>
<body>
  <h1>GMaps.js &mdash; Geometry overlays</h1>
  <div class="row">
    <div class="span11">
      <div id="map"></div>
    </div>
    <div class="span6">
      <p>You can draw geometry overlays (which can be a polygon or a rectangle or a circle):</p>
      <pre>polygon = map.drawRectangle({
  bounds: bounds,
  strokeColor: '#BBD8E9',
  strokeOpacity: 1,
  strokeWeight: 3,
  fillColor: '#BBD8E9',
  fillOpacity: 0.6
});
polygon = map.drawPolygon({
  paths: paths,
  strokeColor: '#25D359',
  strokeOpacity: 1,
  strokeWeight: 3,
  fillColor: '#25D359',
  fillOpacity: 0.6
});
circle = map.drawCircle({
  lat: lat,
  lng: lng,
  radius: 350,  //350 meters
  strokeColor: '#432070',
  strokeOpacity: 1,
  strokeWeight: 3,
  fillColor: '#432070',
  fillOpacity: 0.6
});</pre>
      <p>Be careful with the settings as they are not the same for each overlay.</p>
    </div>
  </div>
</body>
</html>

Kubi 26 июнь 2015, в 14:54

Источник

Теги:

javascript

angularjs

google-maps

iis

mime-types

3 ответа

Ещё вопросы

RobSeg · Answer 1 · 2015-06-26T11-04-00.000Z

Если вы хотите использовать карту Google внутри Углового приложения, вы должны использовать директиву Angular google maps.

Просто установите с помощью беседки

bower install angular-google-maps

Загружать скрипты на странице HTML

Обратите внимание, что ключ API, предоставленный Google, может быть указан в конце ссылки на maps.googleapis.

<script src='/path/to/lodash[.min].js'></script>
<script src='/path/to/angular-google-maps[.min].js?key=123...'></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>

Инъекционная зависимость в вашем приложении

angular.module('myApplicationModule', ['uiGmapgoogle-maps']);

Добавить карту в область действия

$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };

И добавьте карту в свой шаблон, сделанный!

<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>

Не забудьте указать высоту в CSS

.angular-google-map-container { height: 400px; }

Вам не нужно указывать ключ API, но если вы этого не сделаете, ожидайте увидеть:

NoApiKeys developers.google.com/maps/documentation/javascript/...

Мне нужно использовать библиотеку GMaps
и эти первые строки, если (! (typeof window.google === 'object' && window.google.maps)) {throw 'API Карт Google требуется. Пожалуйста, зарегистрируйте следующую библиотеку JavaScript maps.google.com/maps/api/js?sensor=true . ' } вызывают это. Я думаю, что нужна какая-то асинхронная загрузка, но не могу понять

neaumusic · Answer 2 · 2015-10-29T03-38-00.000Z

Взято из аналогичного вопроса

Укажите &callback=yourCallback в запросе api, а document.write не будет вызван, где

window["yourCallback"] = function() {};//compiler minified dot notation for me

Либо это, либо тег скрипта http://maps.googleapis.com/maps/api/js внутри вашего HTML, поскольку он получает синтаксический анализ в первый раз, например, в недавно построенном iframe или ответе сервера в виде строки.

Я считаю, что это сетевой запрос "referrer", который проверяется на ваш &client=yourClientID и &signature=yourHMACSHA1EncodedSignature, поэтому убедитесь, что ваш window.location.href соответствует заголовку запроса, если вы собираетесь его подписать. document.referrer в iframe покажет родительский URL-адрес кадра, если они не блокируют его (проблема безопасности для некоторых сайтов)

document.write очистит ваш документ, если это произойдет позднее, поэтому оно предотвратило

Kubi · Answer 3 · 2015-06-26T12-01-00.000Z

ОК. Моя проблема здесь заключалась в том, что я дважды ссылался на карты api. Однажды на моей родительской странице, а также на странице карты -child, я включил ее в решение.

Как только я удалил его на родительской странице, моя проблема решена. Возможно, это помогает другим, имеющим ту же проблему. Просто проверьте ссылки. С другой стороны, я не считаю нужным давать ошибку, например, Google Maps API is required. Please register the following JavaScript Google Maps API is required. Please register the following JavaScript моей ситуации Google Maps API is required. Please register the following JavaScript.