谷歌地图JavaScript API从另一个函数获取Lat/Lng并推送到街景图像API

谷歌地图JavaScript API中获取坐标并推送到街景图像API

基础概念

谷歌地图JavaScript API提供了两种主要服务：

地图API - 用于显示交互式地图
街景API - 用于显示特定位置的360度全景图像

Lat/Lng指的是地理坐标系统中的纬度和经度值，是定位地球上任何位置的基础。

实现方法

1. 基本实现代码

// 初始化地图
function initMap() {
    const map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 40.7128, lng: -74.0060}, // 默认纽约坐标
        zoom: 12
    });
    
    // 添加点击事件监听器获取坐标
    map.addListener('click', (event) => {
        showStreetView(event.latLng);
    });
}

// 从其他函数获取坐标并显示街景
function showStreetView(latLng) {
    const panorama = new google.maps.StreetViewPanorama(
        document.getElementById('street-view'), {
            position: latLng,
            pov: {heading: 165, pitch: 0},
            zoom: 1
        }
    );
    
    // 检查该位置是否有街景图像
    const service = new google.maps.StreetViewService();
    service.getPanorama({location: latLng, radius: 50}, (data, status) => {
        if (status === 'OK') {
            console.log('街景图像可用');
        } else {
            console.log('该位置无街景图像');
        }
    });
}

// 在其他函数中获取坐标并调用街景函数
function getLocationFromOtherSource() {
    // 假设从某个函数获取坐标
    const coordinates = {lat: 37.7749, lng: -122.4194}; // 旧金山坐标
    const latLng = new google.maps.LatLng(coordinates.lat, coordinates.lng);
    showStreetView(latLng);
}

2. 从异步函数获取坐标

async function fetchCoordinatesFromAPI() {
    try {
        // 模拟API调用
        const response = await fetch('your-api-endpoint');
        const data = await response.json();
        
        const latLng = new google.maps.LatLng(data.latitude, data.longitude);
        showStreetView(latLng);
    } catch (error) {
        console.error('获取坐标失败:', error);
    }
}

常见问题及解决方案

1. 街景图像不可用

原因：

该位置没有街景覆盖
坐标不精确
街景服务限制

解决方案：

function showStreetView(latLng) {
    const service = new google.maps.StreetViewService();
    
    service.getPanorama({location: latLng, radius: 50}, (data, status) => {
        if (status === 'OK') {
            const panorama = new google.maps.StreetViewPanorama(
                document.getElementById('street-view'), {
                    position: data.location.latLng,
                    pov: {heading: 165, pitch: 0},
                    zoom: 1
                }
            );
        } else {
            // 显示备用内容或错误信息
            document.getElementById('street-view').innerHTML = 
                '<p>该位置无街景图像</p>';
        }
    });
}

2. 坐标格式问题

原因：

从不同来源获取的坐标格式可能不一致

解决方案：

function normalizeCoordinates(lat, lng) {
    // 确保坐标是数字
    const latitude = parseFloat(lat);
    const longitude = parseFloat(lng);
    
    // 验证坐标范围
    if (isNaN(latitude) || isNaN(longitude) || 
        latitude < -90 || latitude > 90 || 
        longitude < -180 || longitude > 180) {
        throw new Error('无效的坐标值');
    }
    
    return new google.maps.LatLng(latitude, longitude);
}

应用场景

房地产网站 - 显示房产周围的街景
旅游应用 - 让用户预览目的地环境
导航系统 - 提供目的地的视觉参考
地理信息系统 - 可视化特定位置的环境

最佳实践

总是检查街景可用性
处理坐标获取失败的情况
添加加载指示器（街景图像可能需要时间加载）
考虑使用radius参数扩大街景搜索范围
缓存常用位置的街景数据以减少API调用

完整示例

<!DOCTYPE html>
<html>
<head>
    <title>地图与街景集成</title>
    <style>
        #map, #street-view {
            height: 300px;
            width: 100%;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <div id="street-view"></div>
    <button onclick="getLocationFromOtherSource()">显示预设位置</button>
    
    <script>
        let map;
        
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 40.7128, lng: -74.0060},
                zoom: 12
            });
            
            // 点击地图获取坐标
            map.addListener('click', (event) => {
                showStreetView(event.latLng);
            });
            
            // 初始显示默认街景
            showStreetView(map.getCenter());
        }
        
        function showStreetView(latLng) {
            const service = new google.maps.StreetViewService();
            
            service.getPanorama({location: latLng, radius: 100}, (data, status) => {
                const streetViewElement = document.getElementById('street-view');
                
                if (status === 'OK') {
                    new google.maps.StreetViewPanorama(streetViewElement, {
                        position: data.location.latLng,
                        pov: {heading: 165, pitch: 0},
                        zoom: 1
                    });
                    
                    // 在地图上标记位置
                    new google.maps.Marker({
                        position: data.location.latLng,
                        map: map,
                        title: '街景位置'
                    });
                } else {
                    streetViewElement.innerHTML = '<p>该位置无街景图像</p>';
                }
            });
        }
        
        function getLocationFromOtherSource() {
            // 从其他函数或API获取坐标
            const coordinates = {lat: 34.0522, lng: -118.2437}; // 洛杉矶坐标
            const latLng = new google.maps.LatLng(coordinates.lat, coordinates.lng);
            
            // 移动地图中心
            map.setCenter(latLng);
            
            // 显示街景
            showStreetView(latLng);
        }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
</body>
</html>

注意：使用时需要替换YOUR_API_KEY为实际的谷歌地图API密钥。