方向通过谷歌地图

-2

箭头我想显示在谷歌地图上查看当前位置的风向有一个圆圈，并使用HTML和JavaScript作为example箭头。我有一个代码，它将显示圆圈而不是箭头。方向通过谷歌地图

走了，但我没有得到确切的结果。任何人都可以帮助我解决这个问题。

下面是我HTML代码

<!DOCTYPE html> 
<html> 
<body> 
<p id="demo">Click the button to get your position.</p> 
<button onclick="getLocation()">Try It</button> 
<div id="mapholder"></div> 
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script> 

var x = document.getElementById("demo"); 
function getLocation() { 
if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(showPosition, showError); 
} else { 
    x.innerHTML = "Geolocation is not supported by this browser."; 
} 
} 

function showPosition(position) { 
lat = position.coords.latitude; 
lon = position.coords.longitude; 
latlon = new google.maps.LatLng(lat, lon) 
mapholder = document.getElementById('mapholder') 
mapholder.style.height = '800px'; 
mapholder.style.width = '1600px'; 


var myOptions = { 
center:latlon,zoom:14, 
mapTypeId:google.maps.MapTypeId.ROADMAP, 
mapTypeControl:false, 
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} 
} 

var map = new google.maps.Map(document.getElementById("mapholder"), myOptions); 
var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!",icon:"asd.png"}); 
// Define circle options 
var circleOptions = { 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: '#FF0000', 
    fillOpacity: 0.35, 
    map: map, 
    center: latlon, 
    radius: 1000 
}; 
var circleOptions1 = { 
     strokeColor: '#FFFF00', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FFFF00', 
     fillOpacity: 0.35, 
     map: map, 
     center: latlon, 
     radius: 500 
    }; 
// Add the circle to the map. 
var markerCircle = new google.maps.Circle(circleOptions); 
var markerCircle1 = new google.maps.Circle(circleOptions1); 

var dx=markerCircle1-markerCircle; 
var dy=markerCircle1-markerCircle; 
var radius=Math.sqrt(dx*dx+dy*dy)/2; 
    $(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    ctx.translate(.5,.5); 

    var img=new Image(); 
    img.crossOrigin="anonymous"; 
    img.onload=start; 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sprite.png"; 

    function start(){ 

     var cw=canvas.width; 
     var ch=canvas.height; 

     ctx.drawImage(img,cw/2-img.width/2,ch/2-img.height/2); 

     var data=ctx.getImageData(0,0,cw,ch).data; 
     var leftX=getLeft(data,cw,ch); 
     var rightX=getRight(data,cw,ch); 
     var topY=getTop(data,cw,ch); 
     var bottomY=getBottom(data,cw,ch); 
     var w=rightX-leftX; 
     var h=bottomY-topY; 
     var cx=leftX+w/2; 
     var cy=topY+h/2; 
     var radius=Math.sqrt(w*w+h*h)/2; 

     ctx.beginPath(); 
     ctx.arc(leftX+w/2,topY+h/2,radius,0,Math.PI*2); 
     ctx.closePath(); 
     ctx.stroke(); 

     ctx.strokeRect(leftX,topY,w,h); 

    } 

    function getLeft(data,width,height){ 
     for(var x=0;x<width;x++) 
     for(var y=0;y<height;y++) 
     { 
      if(data[(width*y+x)*4+3]>0){ return(x); } 
     } 
    } 

    function getRight(data,width,height){ 
     for(var x=width-1;x>=0;x--) 
     for(var y=height-1;y>=0;y--) 
     { 
      if(data[(width*y+x)*4+3]>0){ return(x); } 
     } 
    } 

    function getTop(data,width,height){ 
     for(var y=0;y<height;y++) 
     for(var x=0;x<width;x++) 
     { 
      if(data[(width*y+x)*4+3]>0){ return(y); } 
     } 
    } 

    function getBottom(data,width,height){ 
     for(var y=height-1;y>=0;y--) 
     for(var x=width-1;x>=0;x--) 
     { 
      if(data[(width*y+x)*4+3]>0){ return(y); } 
     } 
    } 


}); // end $(function(){}); 


} 

function showError(error) { 
switch(error.code) { 
    case error.PERMISSION_DENIED: 
     x.innerHTML = "User denied the request for Geolocation." 
     break; 
    case error.POSITION_UNAVAILABLE: 
     x.innerHTML = "Location information is unavailable." 
     break; 
    case error.TIMEOUT: 
     x.innerHTML = "The request to get user location timed out." 
     break; 
    case error.UNKNOWN_ERROR: 
     x.innerHTML = "An unknown error occurred." 
     break; 
    } 
} 

</script> 

</body> 
</html>

来源

2015-01-21 Shivu09

不是没有看到你的代码。 – MrUpsidown 2015-01-21 07:47:36

@mrupsidown我已经编辑和添加只圈运行的代码。 – Shivu09 2015-01-21 08:40:12

请[的jsfiddle]创建[MCVE]（http://stackoverflow.com/help/mcve）（http://jsfiddle.net）。您的代码无法正常工作。 – MrUpsidown 2015-01-21 08:54:05

我解决我的问题，并得到了与下面的行代码的结果。

var start_point = new google.maps.LatLng(lat, lon);  
var end_point = new google.maps.geometry.spherical.computeOffset(start_point, 1000, 180);

来源

2015-01-21 13:11:36 Shivu09

方向通过谷歌地图

回答

相关问题