fromLatLngToDivPixel在不同的viewBox比例尺上沒有給出相同的坐標

Question

我在谷歌地圖的OverlayView類中使用了具有已定義和恆定邊界的SVG，並且我的目標是如果單擊的位置在此邊界內，則在單擊地圖上的某個位置時繪制相應的區域邊界。 我決定不使用google的默認路徑選項來繪制多邊形，而是決定使用SVG路徑元素。 為了避免使用多個SVG元素，我想在一個SVG上使用多個路徑元素（用於區域的多邊形）。 為此，考慮到用戶將更改縮放級別以適應任何縮放級別，我采用了viewBox屬性以根據地圖的縮放級別進行縮放。 因此，主要思想是，當更改地圖的縮放級別時，單個SVG標簽內的所有路徑元素也會根據需要分別對齊。 盡管一切似乎都正常，但單擊不同的縮放級別時，相同的邊界之間仍存在細微差異。 我無法解決問題所在。

我的代碼如下：

如果能幫助我指出此代碼中的錯誤之處，我將不勝感激。

謝謝。

注意：要了解問題並查看實際問題，可以查看我的網站。 由於尚未定義所有地標，因此在屏幕中間某處，某處建築物和綠地中間都可以單擊並查看問題，方法是在平移和縮放后單擊同一區域，然后看到邊界不重疊。 但首先，您必須先單擊底部的“獲取信息”菜單欄，該菜單欄將模式設置為地圖上的區域選擇。 網址 ： https ： //www.mikkins.com/landplot/11.php

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div class="menu">
    <div class="title">MENU</div>
    <div class="wrapper"><div class="button">Get Info</div></div>
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Resources</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>
<div class="intro" id="GMAP"></div>
<svg id="svg1"  xmlns="http://www.w3.org/2000/svg">
</svg>
<script>
    var overlay;
    var polygonReturn=new Array();
    var polygonBounds=new Array();
    var _svgOW;

 function initGMap()
          {                                  
            var mapOptions={ center: {lat:40.88227, lng:29.251796} ,
                                        zoom: 16     ,
                                        mapTypeId:'satellite',
                                        disableDefaultUI: false,
                                        draggableCursor: 'auto',
                                        scrollwheel: false 
                                          };  
            $GMAP=new 
  google.maps.Map(document.getElementById('GMAP'),mapOptions);
            overlay=prepareOverlay($GMAP);



 document.querySelector('.button').addEventListener('click', 
 function(e) 
   {
                    //toggle between pressed and not pressed states 
 for button     
                    e.target.classList.toggle('pressed');
                    if(e.target.className.split(' 
 ').indexOf('pressed')>-1)
                    {
                        $GMAP.setOptions({draggableCursor: 
  'crosshair'});

 google.maps.event.addListener($GMAP,'click',function(evt){
                            //if button is pressed then we are in 
polygon info request mode
                            fetch("/findpolygon.php? 
lat="+evt.latLng.lat()+"&lng="+evt.latLng.lng())
                                    .then(function(response){ return 
response.text();}).
                                    then(function(strarr){

interimSlice=strarr.split('%');

polygonReturn=interimSlice[0].split(',');
                                        console.log(polygonReturn);

polygonInfo=JSON.parse(interimSlice[1]).features[0].properties;
                                        var pixelPath="";
                                        var point=new Array();


polygonReturn.forEach((polygon)=>{
                                            point=polygon.split(' ');

u=_svgOW.projection.fromLatLngToDivPixel(new 

google.maps.LatLng({lat:parseFloat(point[1]), 
lng:parseFloat(point[0])})                              
        u.x=(u.x-parseFloat(_svgOW.svg.style.left)) / 
            (1<<$GMAP.getZoom());
        u.y=(u.y-parseFloat(_svgOW.svg.style.top)) / 
            (1<<$GMAP.getZoom());

        pixelPath+=`${u.x} ${u.y}L`;                                                
            });
        pixelPath="M"+pixelPath;
        pixelPath=pixelPath.slice(0,-2);
        //Definition of new path element
 var svgPath =     
 document.createElementNS('http://www.w3.org/2000/svg', 'path');

 svgPath.setAttribute('id','path3');

 svgPath.setAttribute('fill','none');

 svgPath.setAttribute('stroke','yellow');
 svgPath.setAttribute('stroke-width','0.000008');
 svgPath.setAttribute('d',pixelPath);                                        
 overlay.addNewElement('#svg1',svgPath);
})                                  
 .catch(error=>console.error('Error: ',error));        
                            });

                    } else {
                        $GMAP.setOptions({draggableCursor: 'auto'});

 google.maps.event.clearListeners($GMAP,'click');
                        }

          });
      }


 function prepareOverlay(map){   

 class SVGOverlay extends google.maps.OverlayView {


    constructor(bounds, svg, map) {
        super();

        this.bounds = bounds;
        this.svg = svg;

        super.setMap(map);
    }

    onAdd() {
        const svg = this.svg;
        svg.style.position = 'absolute';

        //Add the SVG element to a map pane/layer that is able to 
 receive mouse events:
        const panes = super.getPanes();
        panes.overlayMouseTarget.appendChild(svg);
        const projection = super.getProjection(),
              bounds = this.bounds,
              sw = 
 projection.fromLatLngToDivPixel(bounds.getSouthWest()),
              ne = 
 projection.fromLatLngToDivPixel(bounds.getNorthEast());

        //Place the SVG element;
        var vbox=sw.x+" "+ne.y+" "+(ne.x - sw.x)+" "+(sw.y - ne.y);
        this.svg.setAttribute("viewBox",vbox);

    }

    /**
        Whenever we need to (re)draw the overlay on the map, including 
 when first added.
    */
    draw() {

        //Here, we need to find the correct on-screen position for our 
 image.
        //To achieve that, we simply ask the map's projection to 
 calculate viewport pixels from the image's lat/lng bounds:
              const projection = super.getProjection(),
              bounds = this.bounds,
              sw = 
projection.fromLatLngToDivPixel(bounds.getSouthWest()),
              ne = 
projection.fromLatLngToDivPixel(bounds.getNorthEast());

              var scale = 1 << (map.getZoom());

        //Place/resize the SVG element:
        const s = this.svg.style;
        s.left = sw.x + 'px';
        s.top  = ne.y + 'px';
        s.width  = (ne.x - sw.x) + 'px';
        s.height = (sw.y - ne.y) + 'px';

         var vbox="0 0 "+(ne.x - sw.x)/scale+" "+(sw.y - ne.y)/scale;
        this.svg.setAttribute("viewBox",vbox);


        }

    } 



   function addEvent(target, type, handler) {
    const targets = (typeof target === 'string') ? 
  Array.from(document.querySelectorAll(target))
                                                 : [target];
    targets.forEach(t => google.maps.event.addDomListener(t, type, 
 handler));
}

 function initOverlay() {
    //Say which area we want the image to occupy:
    const svgBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(35, 25),
        new google.maps.LatLng(44, 46),
    );
    _svgOW=new SVGOverlay(svgBounds, mySVG, map);

    addEvent('path', 'click', e => {
        console.log('Clicked!');
        e.currentTarget.style.fill = '#' + Math.floor(Math.random() * 
  0xfffff);
        e.stopPropagation();
    });
    addEvent('path', 'dblclick', e => {
        //Avoid zooming here:
        e.stopPropagation();
    });
   }

 addEvent(window, 'load', initOverlay);
 var TILE_SIZE=256;
 return {
    addNewElement: function (toWhere,element)
    {
        document.querySelector(toWhere).append(element)
    },

    }
 }        

 </script>
 <script async defer src="https://maps.googleapis.com/maps/api/js? 
 key=MY_APIKEY&callback=initGMap&language=&signed_in=false">
 </script>            
 </body>

</html>