1

我有一个小项目，用户在其中查看一个位置卡，其中包含有关该位置的一些信息（学校、餐厅、研究所等），并且在该卡上我有一个跨度，其中的类visit-location具有 lat 和 lng 的两个属性位置，如果已单击，它应该打开一个名为 map.php 的页面并加载地图，该位置位于中心现在我已经编写了加载地图的代码，但我对发送 lat 和 lng 属性感到困惑加载时的地图.. 我将在下面提供我的代码以进行任何编辑或更改
编辑：我从控制台收到错误消息：“未捕获的 ReferenceError：未定义谷歌”html 中的跨度标记代码： 

<span class="visit-location" lat="12.7855" lng="45.0187">Visit in map</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 async defer src="https://maps.googleapis.com/maps/api/
js?key=mykey&callback=loadMap"> 
</script>
4

2 回答 2

0

基于@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
    });
}
于 2018-10-15T10:24:48.313 回答
0

一种可能的解决方案是使用本地存储来保存地图中心状态：

$('.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
    });
}
于 2018-10-14T16:26:52.397 回答