-1
ここに図を作成しようとしています。しかし、ブラウザは次のエラーを出しています。私はジオメトリライブラリに結合してGoogleマップのAPIを使用しようとしています。しかし、それを実行することはできません。 エラー：curve.html：79キャッチされない例外TypeError：プロパティを読み取ることができません 'computeOffset' 未定義ジオメトリライブラリを追加する
<!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>
する必要があります[MCVE]それはあなたの問題を示してください。 – geocodezip