web-dev-qa-db-ja.com

setMap（null）がGoogle Maps API V3で機能しないのはなぜですか？

私はgooglemaps api 3.9を使用しています。アプリ内でユーザーはマーカーを追加または削除できます。ユーザーが地図をクリックすると、情報ウィンドウが表示されます。ユーザーは名前、緯度、経度を入力し、次のように画像を保存をクリックできます。

google.maps.event.addListener(map, 'click', function(event) {

  point = new google.maps.Marker({
    position: event.latLng
    , map: map
    , icon: 'resource/image/mapIcons/point.png'
    , id: id
    , type:"point"
  });

  type = point.type;
  newPoint = true;
  existingPoint = false;
  markerObj = this;

  inputInfowindow.setContent("<table style='width:92%;' id='inputTable'>" +
                             "<tr> <td>point</td> </tr>" +
                             "<tr> <td><input class='infoInput' type='text' id='name' placeholder='name'/> </td> </tr>" +
                             "<tr> <td><input class='infoInput'type='text' id='lat' placeholder='latitude'/></td> </tr>" +
                             "<tr> <td><input class='infoInput'type='text' id='lon' placeholder='longitude'/></td> </tr>" +
                             "<tr><td><input type='image' src='resource/image/mapIcons/save.png' onclick='save()' class='saveImage' alt='save'/> </td></tr>");

  event1 = event.latLng;
  currentMarker = point;
  inputInfowindow.open(map,point);

});

dBに保存されたマーカー。ユーザーが削除ボタンをクリックすると、次のメソッドが呼び出されます。

function deleteMarker(id,rev) {
  var marker  = markerObj;
  markerObj = undefined;
  var x = confirm("are you sure to delete marker?");
  if(x){
    deleteLocations(id,rev);//removes marker details from DB
    if(marker){
      console.log(marker);
      marker.setMap(null);
    }
  }
}

しかしmarker.setMap（null）;マーカーはマップから削除されますが、マップ上にあります。console.log（marker）;で確認しました。マーカーオブジェクトが正しく表示され、コンソールにエラーはありません。グーグルを何度も実行しましたが、結果はありません。これについては助けてください。

google-mapsgoogle-maps-api-3google-maps-markers
7
P Srinivas Goud

ドキュメントから-

マップからオーバーレイを削除するには、オーバーレイのsetMap（）メソッドを呼び出し、nullを渡します。このメソッドを呼び出してもオーバーレイは削除されないことに注意してください。それは単にマップからオーバーレイを削除します。代わりにオーバーレイを削除する場合は、マップからオーバーレイを削除してから、オーバーレイ自体をnullに設定する必要があります。

したがって、marker.setMap(null)の後に、marker=nullも記述する必要があります。

Update1-

function deleteMarker(id,rev) {
  var x = confirm("are you sure to delete marker?");
  if(x)
  {
    deleteLocations(id,rev);//removes marker details from DB
    if(markerObj)
    {
       console.log(markerObj);
       markerObj.setMap(null);
       markerObj=null;
    }
  }
}

更新2-

これが機能する簡単なデモです。コードを見て、コードが間違っている場所を確認してください。おそらく、コードにいくつかの可変スコープの問題が存在します。

ワーキングデモ

13
Cdeez

私も同じ問題を抱えていました。 markers[index].setMapp(null)の前にこれらのメソッドを呼び出す必要があります：

_map.setCenter(desMarker[index].getPosition());
desMarker[index].setPosition(null);
_

これらの呼び出しの後：

markers[index].setMapp(null)

2
ivahidmontazer

同様のエラーが発生しましたが、私の解決策があなたのケースに当てはまるかどうかはわかりません。それでも、ページが読み込まれたときに、データベースに示されている座標からのマーカーでマップがいっぱいになるようにコードを設定しました。次に、ユーザーがデータベースにポイントを追加できるようにしてから、地図上でユーザーが選択した場所にマーカーを追加しました。

私が気付いていなかったのは、データベースで座標が変更または作成されるたびに、コードがマップ上のすべての座標にマーカーを再追加していたことです。したがって、ポイントを作成するときはいつでも、手動で座標にマーカーを追加し、データベースは座標にマーカーを追加していました。したがって、コードが壊れていると思ったとき、実際に起こっていたのは、同じ場所にある2つのポイントのうちの1つを削除していたことです。

したがって、データベースから座標とマーカーをどのように取得しているかは正確にはわかりませんが、調べる価値はあります。

0
Noah Wilson

マップクリックイベントで、thisをmarkerObjに割り当てます。 thisは、マーカーオブジェクトではなく、マップオブジェクトを参照しますが。

に変更します

markerObj = point;

期待どおりに機能するはずです。

0
Seain Malkin

marker.setMap(null)はオブジェクトを削除せず、非表示にするだけです。削除するにはmarker = null;

0
Marcelo