1

非常に奇妙な問題を抱えています。

A: 私のマップの 1 つの方法は正常に機能します。ユーザーが開始点と終了点を設定すると、マップが作成され、fitBounds.extend(bounds) が適切にズーム レベルを設定して、マップ上の開始/終了マーカーを囲みます。

B: 2 番目の方法は、ユーザーが開始点を設定して終了点を設定しない場合ですが、他のユーザーの関心に基づいて、それらの取得と終了点を取得し、方法 A と同じ関数を使用してマップ上にプロットします。 fitBounds.extend(bounds) ズーム レベルを 4 (国レベル) に設定します。次に、ズームを強制的に設定する必要があります。

ユーザーがいつメソッド A を実行するか (メソッド B の前または後) は関係ありません...メソッド A の場合、ズーム レベルは正しいです。メソッドBの場合、常にズームレベル4になります。

...しかし、すべて同じ機能を使用しています。

どちらの方法でも、マーカーを地図上に正確に配置し、マーカー間のルートを正確に描画します。方法 A では自動ズームは正しく、方法 B ではズームは常に 4 に設定されています。

ユーザーがAを実行すると、その右...次にBが発生し、ズームアウトします...もう一度Bを実行すると、ズームアウトしたままになります...もう一度Aを実行すると、適切なズームに戻ります。

ここで私を狂わせる！

私のマップオブジェクトは「setMap」で、グローバル変数です

function setMapBounds(start,end) {
  mapBounds = new google.maps.LatLngBounds();
  mapBounds.extend(start.position);
  mapBounds.extend(end.position) ;
  setMap.fitBounds(mapBounds) ;
}

function addMarkers(newMarkers) {  // an array of map points.
  var tempMarkers = [] ;

  for (var x=0;x<newMarkers.length;x++) {
    var tempLatlon = new google.maps.LatLng(newMarkers[x].lat,newMarkers[x].lon) ;
    var tempMarker = createMarker(tempLatlon,newMarkers[x].img,newMarkers[x].title) ;
    tempMarkers.push(tempMarker) ;
  }
  return tempMarkers ;
}

function createMarker(latlon,img,title) {
  var marker = new google.maps.Marker({
    map:setMap,
    position:latlon,
    icon: img,
    title:title
  }) ;
  return marker ;
}

// これは方法 A です - 常に適切にズームを設定します

function setDropoff(dropoffLoc) {  //called from: index.js/setPickup(), tab-map.html
    geoCoder.geocode({'address': dropoffLoc}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        endLocation = dropoffLoc ;
        endLat = results[0].geometry.location.lat() ;
        endLon = results[0].geometry.location.lng() ;
        // first clear any existing END Markers only.
        while(markersArray.length) { 
          markersArray.pop().setMap(null); 
        }
        endPointSet = 1 ;
        endLatlon = new google.maps.LatLng(endLat,endLon) ;
        var endMarker = createMarker(endLatlon,'img/red-pin.png','Drop off') ;
        markersArray.push(endMarker) ;
        setMapBounds(userMarker,endMarker) ;

        if (startPointSet == 1) {
          drawRoute("DRIVING",startLocation,endLocation) ;
        } 
      }
    } else {
        error = "Address not found."
    }
  });
}

// これはメソッド B です。常にズーム アウトを 4 にプッシュします。ユーザーが手動でエンド ポイントを設定したかどうかをテストする別の関数から引き出されます...そうであれば、ユーザーが設定した start/end の間に wayPoints を追加しますポイント。そうでない場合は、ユーザーの開始点にマップを関心のある単一の終点に設定します

if (endPointSet == 1) {  // draw Pickup to START to wayPoints to END
    var markers = [
      {lat:interests[0].shub_lat,lon:interests[0].shub_lon,img:interests[0].img,title:"Pickup"},
      {lat:interests[1].ehub_lat,lon:interests[1].ehub_lon,img:interests[1].img,title:"Dropoff"}
    ] ;
    var points = [interests.shub_address,interests.ehub_address] ;
    extraMarkers = addMarkers(markers) ;
    drawRoute("BICYCLING",startLocation,endLocation,points) ;
  } else {  
    var markers = [
      {lat:interests[0].shub_lat,lon:interests[0].shub_lon,img:interests[0].img,title:"Dropoff"}
      ] ;

    extraMarkers = addMarkers(markers) ;
    setMapBounds(userMarker,extraMarkers[0]) ;
    drawRoute("WALKING",startLocation,interests[0].shub_address) ;
  }
}

メソッド B 内の else から setMapBounds に渡されるオブジェクトは次のとおりです。開始点はユーザーによって設定されますが、終了点が設定されていないため、1 つ選択しています。最初のオブジェクトは開始、2 番目のオブジェクトは終了です。

Lh {__gm: Object, gm_accessors_: Object, map: Qk, closure_uid_909815000: 563, gm_bindings_: Object…} 
Lf: Object 
... 
  position: pf 
    D: -82.49799999999999 
    k: 27.873196 
... 

Lh {__gm: Object, gm_accessors_: Object, map: Qk, closure_uid_909815000: 602, gm_bindings_: Object…} 
Lf: Object 
... 
  position: pf 
    D: -82.47631678090198 
    k: 27.9374560148825 
...

メソッド A から setMapBounds に渡されたオブジェクトは次のとおりです。ユーザーは同じ開始点と終了点の両方を設定しています。メソッド A と B の両方で開始点が同じであることがわかります。

Lh {__gm: Object, gm_accessors_: Object, map: Qk, closure_uid_909815000: 563, gm_bindings_: Object…} 
  Lf: Object 
  ... 
  position: pf 
    D: -82.49799999999999 
    k: 27.873196 
... 

Lh {__gm: Object, gm_accessors_: Object, map: Qk, closure_uid_909815000: 703, gm_bindings_: Object…} 
  Lf: Object 
  ... 
  position: pf 
    D: -82.45717760000002 
    k: 27.950575 
  ...
4

1 に答える 1

0

私は同様のアプリケーションを作成しており、使用しているコードは次のとおりです。

var start;
var end;

function updateMap(name, obj){ //obj is a form input i.e. <input type="text">
  var marker = (name==='start')?start:end;
  geocoder.geocode({address:obj.value}, function(results, status){

    //get coords/check if is valid place
    if(status === google.maps.GeocoderStatus.OK){

      //get info, store in new marker
      marker.setPosition(results[0].geometry.location);
      marker.setTitle(obj.value);

      //if both markers present
      if(start.getPosition() && end.getPosition()){
        map.fitBounds(new google.maps.LatLngBounds(start.getPosition(), end.getPosition()));
      }else{

        //otherwise, if one marker
        map.setCenter(marker.getPosition());
        map.setZoom(15);
      }
      marker.setMap(map);
    }else if(status === google.maps.GeocoderStatus.ZERO_RESULTS){
      alert('There is an issue with address. Please refer to the "Help" link.');
    }else{
      setTimeout(function(){
        updateMap(marker, obj);
      }, 200);
    }
  });
}

これが行うことは、テキスト入力から引数を取得し、それをジオコーディングして、地図上にマーカーを配置することです。関数はonchange、フォーム要素のイベントによってトリガーされます。これは、自分の使用法に合わせて簡単に調整できます。ポイントが 1 つしかない場合は、デフォルトのズーム値に落ち着きました (通常は通りにかなり近いですが、必要に応じて調整できます)。

なぜ機能しないのかという質問については、コード全体からより良い推測を立てることができます。今のところ、地域バイアスと関係があるか、単なるバグだと思います。おそらく、それを回避するのが最善です。

于 2015-06-12T00:16:22.303 に答える