Карты Google - переход к определенному местоположению по щелчку пролета - PullRequest
0 голосов
/ 14 октября 2018

У меня есть небольшой проект, в котором пользователи просматривают карты мест, которые содержат некоторую информацию о таких местах (школы, рестораны, институты, ...), и на этой карте у меня есть промежуток с классом visit-location, который имеет дваатрибуты lat и lng местоположения и, если щелкнуть по нему, он должен открыть страницу с именем map.php и загрузить карту с местоположением в центре, теперь я написал код для загрузки карты, но я не уверен в отправкеатрибуты lat и lng к карте при ее загрузке. Я предоставлю свой код ниже для любых изменений или изменений
Редактировать: у меня появляется сообщение об ошибке из консоли: «Uncaught ReferenceError: Google не определен» тег spanкод в html:

<span class="visit-location" lat="12.7855" lng="45.0187">Visit in map</span>  

функция щелчка span:

$('.visit-location').click(function(){
    var lat = $(this).attr('lat');
    var lng = $(this).attr('lng');
    loadMap(lat,lng);
    window.location.href='map.php';
});  

загрузить функцию карты:

function loadMap(lat,lng){
    var aden = {lat: lat , lng: lng}; 
    var map = new google.maps.Map(document.getElementById('map'),{
        zoom: 15,
        center: aden,
        streetViewControl: false,
        mapTypeControl: false
    });
}  

код map.php, где я вызываю карту:

<div id="map-container">
    <div id="map"></div>
</div>  

ключ API карты, как указано в теге script:

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

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

Основываясь на ответе @webprojohn, я попытался использовать localStorage по-другому, и это работает

$('.visit-location').click(function(){
    var lat = $(this).attr('lat');
    var lng = $(this).attr('lng');
    localStorage.setItem('lat', lat);
    localStorage.setItem('lng', lng);
    window.location.href='map.php';
});  
function loadMap(){
    var aden = {lat: parseFloat(localStorage.getItem('lat')) , lng: parseFloat(localStorage.getItem('lng'))};
    var map = new google.maps.Map(document.getElementById('map'),{
        zoom: 15,
        center: aden,
        streetViewControl: false,
        mapTypeControl: false
    });
}
0 голосов
/ 14 октября 2018

Одним из возможных решений является использование локального хранилища для хранения состояния центра карты:

$('.visit-location').click(function(){
    var lat = $(this).attr('lat');
    var lng = $(this).attr('lng');
    // loadMap(lat,lng);
    localStorage.setItem('aden', JSON.stringify({ lat: lat, lng: lng }))
    window.location.href='map.php';
}); 

на maps.php:

function loadMap(){
    var aden = JSON.parse(localStoarage.getItem('aden'))
    var map = new google.maps.Map(document.getElementById('map'),{
        zoom: 15,
        center: aden,
        streetViewControl: false,
        mapTypeControl: false
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...