Question

我想在这里做一个数字。但浏览器出现以下错误。我正在尝试将谷歌地图api与几何库结合使用。但无法运行它。错误： curve.html：79未捕获的TypeError：无法读取属性＆＃39; computeOffset＆＃39;未定义的

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 50%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
      <div>
      </br>
      <input type="number" name="" id="Radius" placeholder="FrontFace" style="margin:30px" onchange="initMap()"> 
      </br>
      <input type="number" name="" id="Backface" placeholder="BackFace" style="margin:30px" onchange="initMap()"> 

    </div>
    <script>

      var map;
      function initMap() {
        debugger;
              var radius=parseInt(document.getElementById("Radius").value);
              var radius2=parseInt(document.getElementById("Backface").value);
              
        var cen= {lat: -34.397, lng: 150.644}
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
        google.maps.event.addListener(map,"click",function(event){
            var lat=event.latLng.lat();
            var lng=event.latLng.lng();
            cen={lat:lat,lng:lng};
            });
         map.addListener('click', function(e) {
            debugger;
            placeMarkerAndPanTo(e.latLng, map);
       //     drawCircle(map,cen,radius);
            drawBlastClearance(map,cen,radius,radius2)
         });
      
        }


        function convertLat(r,angle,cen)
        {
            debugger;
            sin=Math.sin(Math.PI*(angle/180))
            dy=((r*sin)/ (110540) );
            return cen.lat+dy;
        }
        
        function convertLng(r,angle,cen)
        {
            debugger;
            cos=Math.cos(Math.PI*(angle/180))
            dx=((r*cos)/ (11320*Math.cos(Math.PI*(angle/180))) );
            return cen.lng+dx;
        }
        
        

        function drawBlastClearance(map,cen,r1,r2){
          debugger;
         LatLng=google.maps.LatLng
         spherical=google.maps.spherical;

        //CODE TO GENERATE BLAST CLEARANCE ZONE POINTS
        Apos=spherical.computeOffset(cen, 158, -45);
        Bpos= spherical.computeOffset(cen, 156, 45);
        CPos=spherical.computeOffset(cen, 80, 237);
        DPos=spherical.computeOffset(cen, 80, 113);
        ///LINE 1
        var pos1 = new LatLng(Apos.lat, Apos.lng);
        var pos2 = new LatLng(Bpos.lat, Bpos.lng);
        var pos3 = new LatLng(CPos.lat, CPos.lng);
        var pos4 = new LatLng(DPos.lat, DPos.lng);

          var marker = new google.maps.Marker({
          position: Apos,
          map: map,
          label:'A',
          title: 'Hello World!'
        });
          var marker1 = new google.maps.Marker({
          position: Bpos,
          map: map,
          label:'B',
          dragable:true,
        });
          var marker2 = new google.maps.Marker({
          position: CPos,
          label:'C',
          map: map,
        });
          var marker3 = new google.maps.Marker({
          position: DPos,
          map: map,
          label:'D',
        });  


        var line = new google.maps.Polyline({
            path: [
                DPos,Bpos
            ],
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2,
            map: map
        });

        var line1 = new google.maps.Polyline({
            path: [
                CPos,Apos
            ],
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2,
            map: map
        });

         function updateCurveMarker() {
        Point=google.maps.Point;
        curvature=-.45;
        var curveMarker;
        var pos1 = marker.getPosition(), // latlng
            pos2 = marker1.getPosition(),
            projection = map.getProjection(),
            p1 = projection.fromLatLngToPoint(pos1), // xy
            p2 = projection.fromLatLngToPoint(pos2);

        // Calculate the arc.
        // To simplify the math, these points 
        // are all relative to p1:
        var e = new Point(p2.x - p1.x, p2.y - p1.y), // endpoint (p2 relative to p1)
            m = new Point(e.x / 2, e.y / 2), // midpoint
            o = new Point(e.y, -e.x), // orthogonal
            c = new Point( // curve control point
                m.x + curvature * o.x,
                m.y + curvature * o.y);

        var pathDef = 'M 0,0 ' +
            'q ' + c.x + ',' + c.y + ' ' + e.x + ',' + e.y;

        var zoom = map.getZoom(),
            scale = 1 / (Math.pow(2, -zoom));

        var symbol = {
            path: pathDef,
            scale: scale,
            strokeWeight: 2,
            fillColor: '#FF0000'
        };

        if (!curveMarker) {
            curveMarker = new google.maps.Marker({
                position: pos1,
                clickable: false,
                icon: symbol,
                zIndex: 0, // behind the other markers
                map: map
            });
        } else {
            curveMarker.setOptions({
                position: pos1,
                icon: symbol,
            });
        }
    }

    google.maps.event.addListener(map, 'projection_changed', updateCurveMarker);
    google.maps.event.addListener(map, 'zoom_changed', updateCurveMarker);

    google.maps.event.addListener(marker1, 'position_changed', updateCurveMarker);
    google.maps.event.addListener(marker2, 'position_changed', updateCurveMarker);    

    function updateCurveMarker1() {
        Point=google.maps.Point;
        curvature=.45;
        var curveMarker;
        var pos1 = marker2.getPosition(), // latlng
            pos2 = marker3.getPosition(),
            projection = map.getProjection(),
            p1 = projection.fromLatLngToPoint(pos1), // xy
            p2 = projection.fromLatLngToPoint(pos2);

        // Calculate the arc.
        // To simplify the math, these points 
        // are all relative to p1:
        var e = new Point(p2.x - p1.x, p2.y - p1.y), // endpoint (p2 relative to p1)
            m = new Point(e.x / 2, e.y / 2), // midpoint
            o = new Point(e.y, -e.x), // orthogonal
            c = new Point( // curve control point
                m.x + curvature * o.x,
                m.y + curvature * o.y);

        var pathDef = 'M 0,0 ' +
            'q ' + c.x + ',' + c.y + ' ' + e.x + ',' + e.y;

        var zoom = map.getZoom(),
            scale = 1 / (Math.pow(2, -zoom));

        var symbol = {
            path: pathDef,
            scale: scale,
            strokeWeight: 2,
            fillColor: '#FF0000'
        };

        if (!curveMarker) {
            curveMarker = new google.maps.Marker({
                position: pos1,
                clickable: false,
                icon: symbol,
                zIndex: 0, // behind the other markers
                map: map
            });
        } else {
            curveMarker.setOptions({
                position: pos1,
                icon: symbol,
            });
        }
    }

    google.maps.event.addListener(map, 'projection_changed', updateCurveMarker1);
    google.maps.event.addListener(map, 'zoom_changed', updateCurveMarker1);

    google.maps.event.addListener(marker1, 'position_changed', updateCurveMarker1);
    google.maps.event.addListener(marker2, 'position_changed', updateCurveMarker1);       
        }


        var markersArray=[];
        var circleArray=[];

        function placeMarkerAndPanTo(latLng, map) {
      while(markersArray.length) { markersArray.pop().setMap(null); }
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });

      markersArray.push(marker) ;
    }
    function drawCircle(map,cen,radii)
    {
        while(circleArray.length){circleArray.pop().setMap(null);}
         var cityCircle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            center:cen,
            radius: radii

          });
        circleArray.push(cityCircle);
    }
    </script>
<!--     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCVhit3Aj--xP28zBUyThLQ7bAHOt72B1c&cal    async defer></script> -->
<!-- lback=initMap libraries=geometry"&sensor=false
 -->
 <script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCVhit3Aj--xP28zBUyThLQ7bAHOt72B1c&libraries=geometry,places">
</script>

  </body>
</html>

＆＃13;

Answer 1

您的代码中有拼写错误。这是不正确的：

spherical=google.maps.spherical;

应该是

spherical=google.maps.geometry.spherical;

fiddle

添加几何库

1 个答案: