-1

私が念頭に置いているのは、ユーザーが最初に半径を入力する入力ボックスです。次に、その横にあるボタンで、ドラッグ可能な円をマップに追加します。

DrawingModeGoogle マップ V3 で試してみました。その半径設定は無視されました。

var map;
var pos;

function initialize() {
  var mapOptions = {
    zoom: 16,
    scaleControl: false,
    zoomControl: false,
    rotateControl: false,
    streetViewControl: false,
    panControl:false,

    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

function setCurrentLocation(){
navigator.geolocation.getCurrentPosition(function(position) {
     pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);
     map.setCenter(pos);
})}


setCurrentLocation();

function drawCircle(){
        var draw_circle = new google.maps.Circle({
        center: pos,
        radius: 200,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map})}


$( "#addcircle" ).click(function() {
  drawCircle();
});

上記の方法を使ってみました。しかし、関数内で変数posが有効ではないようですdrawCircle

$( "#addcircle" ).click(function() {
  drawCircle();
});

この部分は、クリックすると円が追加される特定のボタンに関連しています。

function setCurrentLocation(){
navigator.geolocation.getCurrentPosition(function(position) {
     pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);
     map.setCenter(pos);

     function drawCircle(){
        var draw_circle = new google.maps.Circle({
        center: pos,
        radius: 200,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map})}
        ;
        drawCircle();

})}

をテストするようにコードを変更するとpos、これは機能します。実際に円に送信されるpos座標は有効です。

drawCircle();しかし、ボタンクリックハンドラーを配置すると、関数を機能させることができません。

4

1 に答える 1

0

navigator.geolocation.getCurrentPosition 正しいオブジェクト「pos」をサークルに送信していることを確認してください。

または単にマップに直接位置オブジェクトを割り当てます: new google.maps.LatLng(41.878113, -87.629798) すべてが問題ないことを確認してください

于 2013-10-13T05:13:56.793 に答える