Определите Google Maps перед использованием его методов - PullRequest
Новая
       4

Определите Google Maps перед использованием его методов

0 голосов
/ 30 сентября 2019

Я следую документации API карт Google: https://developers.google.com/maps/documentation/javascript/customoverlays

Определение USGSOverlay, который является прототипом google.maps.OverlayView (), перед их методом init.

У меня есть отдельный html-файл и отдельный javascript-файл (Map.js), где я вызываю метод init для карты. 

  <div id="googleMap"></div>
  <script src="Map.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=<YOURKEY>&callback=init"></script>

Однако это приводит к ошибке, что google не определен в google.maps. .OverlayView ().

Я знаю, что должен определить свой maps.googleapis.com перед моим Map.js, но если я это сделаю, то функция обратного вызова не будет определена, поскольку она находится на карте. js файл.

Как я могу добиться этого, храня HTML-код и код JavaScript в разных файлах?

РЕДАКТИРОВАТЬ:

Итак, я следовалдокументация в ссылке здесь для асинхронного отсрочки: https://developers.google.com/maps/documentation/javascript/tutorial#sync

Но я все еще получаю ошибку.

Мой HTML-код: 

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <style>
      #map {
        height: 50%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="map.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

И мой код JavaScript в map.js: 

var map;
CustomImageOverly.prototype = new google.maps.OverlayView();

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }

      function CustomImageOverly(bounds, image, map) {

        this.bounds_ = bounds;
        this.image_ = image;
        this.map_ = map;

        this.div_ = null;

        this.setMap(map);
      }

Отображает карту правильно, но для наложения,все равно выдает ошибку: гугл не определен. Что-то мне не хватает?

Ответы [ 2 ]

0 голосов
/ 30 сентября 2019

Загрузите ваш map.js после скрипта googleapis. 

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"
async defer></script>
<script src="map.js"></script>
0 голосов
/ 30 сентября 2019

Если вы посмотрите на пример , они не загружают API асинхронно (с помощью функции «async defer» и функции обратного вызова), они загружают его синхронно.

Чтобы сделать это изменениеВаш API включает в себя: 

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"
async defer></script>

Кому: 

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>

Затем инициализируйте карту после завершения загрузки DOM (и API) с помощью: 

google.maps.event.addDomListener(window, 'load', initMap);


var map;
CustomImageOverly.prototype = new google.maps.OverlayView();

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
  var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(62.281819, -150.287132),
    new google.maps.LatLng(62.400471, -150.005608));

  // The photograph is courtesy of the U.S. Geological Survey.
  var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
  srcImage += 'examples/full/images/talkeetna.png';

  overlay = new CustomImageOverly(bounds, srcImage, map);
}

function CustomImageOverly(bounds, image, map) {

  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  this.div_ = null;

  this.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
  height: 100%;
  width: 100% margin: 0;
  padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...