从索引页获取搜索位置缩放到地图页面上的位置

Get Search Location from Index Page & Zoom to Location on Map Page

本文关键字：位置 地图 缩放 获取 搜索 索引      更新时间：2023-09-26

我正在尝试设置从索引页到地图页的重定向，因此，如果用户使用Places Autocomplete库搜索地址，他们将被重定向到带有他们搜索的位置的地图页面。索引页不包括地图，但只有搜索栏与位置自动完成库。

我在索引页上设置的函数如下:

var place;
function indexSearch() {
    // Get Address Field and Attach Places Autocomplete
    var input = document.getElementById('autocomplete');
    var autocomplete = new google.maps.places.Autocomplete(input);
    // Get Place When Place_Changed Event if Fired
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        place = autocomplete.getPlace();
        if (typeof place !== 'undefined') {
            window.location.href = 'map';
            // Don't know what to do here
            // as I can't use map.panTo(place.geometry.location) because
            // map does not exist on index page.
        }
    });
    // Erase Previous Address if Search Bar is Clicked
    inputIndex.onclick = function () {
        inputIndex.value = '';
    } 
}

我需要在负责建立地图的initialize()函数中包含一些东西吗?

function initialize() {
    var mapOptions = {
        zoom: 17,
        center: {
            lat: -33.8666,
            lng: 151.1958
        },
        disableDefaultUI: true
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    // Catch place and pan map to its location
}

编辑:至少提供一个不投票的理由。

我正在考虑使用localStorage或sessionStorage。将lat和lng传递给其中任何一个，并在加载地图页面时检索位置。这是最优解吗?一旦我有解决方案，将更新答案。

我最后是这样做的。这对我很有效。希望它能帮助到将来的人。

在indexSearch()函数中，在sessionStorage中设置一个键来存储搜索位置的位置和位置。在触发place_event时捕获此信息。

var place;
function indexSearch() {
    // Get Address Field and Attach Places Autocomplete
    var input = document.getElementById('autocomplete');
    var autocomplete = new google.maps.places.Autocomplete(input);
    // Get Place When Place_Changed Event if Fired
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        place = autocomplete.getPlace();
        if (typeof place !== 'undefined') {
            window.location.href = 'map';
            // Set key in sessionStorage
            sessionStorage.myLat = place.geometry.location.lat();
            sessionStorage.myLat = place.geometry.location.lng();
        }
    });
    // Erase Previous Address if Search Bar is Clicked
    inputIndex.onclick = function () {
        inputIndex.value = '';
    } 
}

然后在initialize()函数中，检查键是否存在。如果是，将用户带到该位置。

function initialize() {
    var mapOptions = {
        zoom: 17,
        center: {
            lat: -33.8666,
            lng: 151.1958
        },
        disableDefaultUI: true
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    // Get place from sessionStorage if its exists & pan map to its location
    var placeLat = sessionStorage.getItem('myLat');
    var placeLng = sessionStorage.getItem('myLng');
    if (placeLat && placeLng) {
         var searchedPlace = new google.maps.LatLng(placeLat, placeLng);
         map.setCenter(searchedPlace);
         map.setZoom(15);
    }
}
相关文章：