Google Map起止点相同时缩放受限问题及控制方法咨询

问题根源 #

1. 当前初始缩放级别设为zoom:1，属于全球视图范围，标记在这种尺度下自然显得没居中，移动端屏幕空间有限会更明显。
2. 当两个坐标完全重合时，LatLngBounds的东北、西南边界点一致，无法计算有效视图范围，因此用了也起不到作用。
3. 起点终点相同时调用DirectionsService会返回ZERO_RESULTS状态，这类无效请求不仅没必要，还可能干扰地图视图的正常渲染。

解决方案 #

直接判断坐标是否相同，分场景处理：

• 坐标相同时：手动设置地图中心为该坐标，给一个适合近距离查看的缩放级别（比如18，对应街道级视图），同时只显示一个标记避免重叠。
• 坐标不同时：再调用路线服务，让地图自动适配路线覆盖范围。

修改后的完整代码 #

<!doctype html>
<html>
  <head>
    <meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, shrink-to-fit=no' />
    <title>Simple Map</title>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .custom-marker {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        background-color: #32a852;
        color: #FFFFFF;
        border-radius: 50%;
        font-size: 16px;
        font-family: Arial, sans-serif;
        text-align: center;
        line-height: 10px; 
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      let map;
      
      // 测试用相同坐标
      let lat1 = 1.452728;
      let lng1 = 103.816431;
    
      let lat2 = 1.452728;
      let lng2 = 103.816431;

      async function initMap() {
        const { Map } = await google.maps.importLibrary("maps");
        const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

        const isSameLocation = lat1 === lat2 && lng1 === lng2;
        const mapCenter = { lat: (lat1 + lat2) / 2, lng: (lng1 + lng2) / 2 };

        map = new Map(document.getElementById("map"), {
          center: mapCenter,
          // 坐标相同时用近距离缩放，不同时用初始合适级别
          zoom: isSameLocation ? 18 : 12,
          mapTypeId: "roadmap",
          streetViewControl: false,
          mapTypeControl: false,
          rotateControl: false,
          mapId: "4504f8b37365c3d0",
        });

       const originMarker = document.createElement('div');
       originMarker.className = 'custom-marker';

      // 生成起点标记
        const origin = new AdvancedMarkerElement({
          map,
          position: { lat: lat1, lng: lng1 },
          content: originMarker
        });
      
        // 坐标不同时才显示终点标记并请求路线
        if (!isSameLocation) {
          const destination = new AdvancedMarkerElement({
            map,
            position: { lat: lat2, lng: lng2 },
          });
          
          const directionsService = new google.maps.DirectionsService(); 
          const directionsRenderer = new google.maps.DirectionsRenderer({ 
            map: map,
            suppressMarkers: true, 
            polylineOptions:{
              strokeColor: "#F33F33",
                  strokeOpacity: 1,
                  strokeWeight: 5,
            }
          });
          
          const request = {
            origin: new google.maps.LatLng(lat1, lng1),
            destination: new google.maps.LatLng(lat2, lng2),
            travelMode: 'DRIVING',
            unitSystem: google.maps.UnitSystem.METRIC
          };

          directionsService.route(request, (response,status) => {
            if (status === 'OK') {
              directionsRenderer.setDirections(response);
              // 让地图自动适配路线范围
              map.fitBounds(response.routes[0].bounds);
            } else {
              console.error('路线请求失败：' + status);
            }
          });
        }
      }
      initMap();
    </script>
    <script async
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
    </script>
  </body>
</html>

关键修改点 #

• 增加isSameLocation判断，区分坐标相同/不同的场景
• 坐标相同时，设置zoom:18（可根据需求调整为16-20之间的级别，都是适合近距离查看的尺度），并且只保留一个标记避免重叠
• 坐标不同时，才调用路线服务，并用map.fitBounds(response.routes[0].bounds)让地图自动适配路线覆盖范围
• 移除了无效的路线请求，避免不必要的错误日志干扰

内容的提问来源于stack exchange，提问作者jx work