円の中心をユーザの現在の位置に設定する必要があります

-1

入力ボックスとボタンで円の半径を設定できるようにするには、次のコードがあります。私がする必要があるのは、サークルの中心をユーザの現在の位置に設定することです。どんな助けもありがとう。円の中心をユーザの現在の位置に設定する必要があります

https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation

ユーザーを取得する必要がありますが、緯度と経度の範囲内：

<apex:page sidebar="false" showheader="false"> 
 
\t 
 
    <head> 
 

 
     
 
    <style type="text/css"> 
 
    html { height: 100% } 
 
    body { height: 100%; margin: 0; padding: 0 } 
 
    #map-canvas { width:100%;height:80%; } 
 
    .controls  
 
    </style> 
 
    
 

 
    <script src="https://maps.googleapis.com/maps/api/js?key=XXXXXX"></script> 
 

 

 
    <script> 
 

 

 
    var myCenter = new google.maps.LatLng(51.508742, -0.120850); 
 
    var circle; 
 

 
    function initialize() { 
 
    var mapProp = { 
 
     center: myCenter, 
 
     zoom: 15, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 
    var marker = new google.maps.Marker({ 
 
     position: myCenter, 
 
    }); 
 
    
 
    circle = new google.maps.Circle({ 
 
     map: map, 
 
     radius: 100, // 10 miles in metres 
 
     fillColor: '#AA0000', 
 
     center: myCenter 
 
    });    
 
    marker.setMap(map);  
 

 
    } 
 

 
    function updateRadius(){ 
 
    var rad = document.getElementById("value_rad").value; 
 
    circle.setRadius(parseFloat(rad)); 
 
    } 
 
    
 

 
    google.maps.event.addDomListener(window, 'load', initialize); 
 
    console.log() 
 

 
    </script> 
 
    </head> 
 
    <body> 
 
    
 
    <div id="googleMap" style="width:100%;height:80%;"></div> 
 
    <input id="value_rad" /> 
 
    <input id="radius" type="button" value="Search" onclick="updateRadius()"/> 
 
    </body> 
 
    </apex:page>

出典

2016-11-22 Lawrence

、良いここでは過去記事は何がジオロケーションと呼ばれる後にしているがありますの成功コールバックnavigator.geolocation.getCurrentPosition（成功、エラー、オプション）;

例：

function success(pos) { 
    var crd = pos.coords; 
    var myCenter = new google.maps.LatLng(crd.latitude, crd.longitude); 
    // init map and whatnot 
};

あなたは、ユーザーの場所を取得することは許可されていることを確認するためにいくつかのチェックを行う必要があります、上記のリンクでそれへの参照があります。あなたは（彼/彼女の位置を共有することに同意し、ユーザーが必要です）ユーザーgeolocateする必要が

出典

2016-11-22 12:37:02

：

if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position){ 
     var latitude = position.coords.latitude; 
     var longitude = position.coords.longitude; 
     var myCenter = new google.maps.LatLng(latitude, longitude); 
    //rest of function 
    }); 
}

注 - Chromeでこれを行うには、あなたはhttpsを使用する必要があります。

出典

2016-11-22 12:37:44 sideroxylon

円の中心をユーザの現在の位置に設定する必要があります

答えて

関連する問題