Я пытаюсь интегрировать API Карт Google в свой проект ReactJS и Cordova, чтобы использовать автозаполнение мест. Мне не нужно отображать всю карту. В настоящее время я использую тег script, чтобы добавить API Карт Google в свой проект. Однако я хотел бы избежать этого, установить его и импортировать, как и все другие мои библиотеки React. Есть ли способ сделать это?
Есть ли способ импортировать API Карт Google в реакцию без тега script?
02.06.2016
Ответы:
1
Вы можете загрузить его через javascript;
модуль jQuery -
(function (global) {
"use strict";
function onDeviceReady () {
document.addEventListener("online", onOnline, false);
document.addEventListener("resume", onResume, false);
loadMapsApi();
}
function onOnline () {
loadMapsApi();
}
function onResume () {
loadMapsApi();
}
function loadMapsApi () {
if(navigator.connection.type === Connection.NONE || google.maps) {
return;
}
$.getScript('https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=true&callback=onMapsApiLoaded');
}
global.onMapsApiLoaded = function () {
// Maps API loaded and ready to be used.
var map = new google.maps.Map(document.getElementById("map"), {});
};
document.addEventListener("deviceready", onDeviceReady, false);
})(window);
функция loadMapsApi() -
function loadMapsApi () {
if (navigator.connection.type === Connection.NONE || (global.google !== undefined && global.google.maps)) {
return;
}
// load maps api
}
Это лучший способ, поскольку он справляется с отключением от сети.
Вы можете прочитать об этом больше здесь.
03.06.2016
2
всегда есть четыре библиотеки :) это — первый результат от Google. Наслаждаться :)
02.06.2016
3
Я использовал JavaScript в своем компоненте карты, чтобы загрузить тег script в DOM. Я знаю, что в этом решении по-прежнему используется тег сценария, но я считаю его наиболее элегантным решением.
const loadMapsApi = () => {
let index = window.document.getElementsByTagName("script")[0];
let script = window.document.createElement("script");
script.async = true;
script.defer = true;
script.src =
"https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=initMap";
if (index.parentNode !== null) {
index.parentNode.insertBefore(script, index);
}
};
Этот подход также требует определения обратного вызова, необходимого для ссылки API Google. Я поместил эту логику в хук useEffect, который привязывает обратный вызов к объекту окна.
const initMap = () => {
const map = new window.google.maps.Map(document.getElementById("map"), {
center: mapOptions.center,
zoom: mapOptions.zoom,
styles: require('./options.json')
});
};
useEffect(() => {
window.initMap = initMap;
}, []);
03.12.2019
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально
Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение
Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования
Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv)
Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..