2

jquerymobile を使用して小さな Google マップ プロジェクトに取り組んでいます。

まず、 un メソッドを呼び出して、自分の位置に関する地図を表示します

navigator.geolocation.getCurrentPosition(function(position){
        showMap(position.coords.latitude, position.coords.longitude);
    }, 
    function onFalid(){
        alert('Error occur on getCurrentPositionError' + error.code + ':: ' + error.message);
    }, 
    {
        enableHighAccuracy  : true,
        maximumAge          : 10000
    });

これが showMap() のコードです

function showMap(lat,long){

    //var latLng = new google.maps.LatLng(data[0].coords.latitude, data[0].coords.longitude);
    var latLng = new google.maps.LatLng(lat,long);

    // Google Map options
    var myOptions = {
      zoom: 15,
      zoomControl   : 1,
      center: latLng,
      mapTypeId: google.maps.MapTypeId.HYBRID////ROADMAP, SATELLITE, HYBRID and TERRAIN
    };

    // Create the Google Map, set options
    Tracking.mapy = new google.maps.Map(document.getElementById("mapHome"), myOptions);
    addMarker(lat, long, map);

}

これはうまくいきました！

ご覧のとおり、最後に別のメソッドを呼び出してマーカーを表示します

function addMarker(lat, long){
    
    //Tracking.mapy.removeOverlay(Tracking.marker);;
    var mapBounds = new google.maps.LatLngBounds();
    
    var latitudeAndLongitude = new google.maps.LatLng(lat, long);
    var image = Markers.info()[0][1]+Markers.info()[0][2];
    
    marker = new google.maps.Marker({
        title   : Markers.info()[0][0],
        //animation: google.maps.Animation.DROP, //BOUNCE
        position: latitudeAndLongitude,
        map     : Tracking.mapy,
        icon : image
    });
    
    Tracking.markers.push(marker);
    
    // Clean previous markers THIS IS NOT WORKING!!!!!!!
    //google.maps.Map.prototype.clearOverlays = function() {
      for (var i = 0; i < Tracking.markers.length; i++ ) {

        Tracking.markers[i].setMap(null);
        console.log(Tracking.markers[i]);
      }
    //}
    
    mapBounds.extend(latitudeAndLongitude);
    Tracking.mapy.fitBounds(mapBounds);
    //trackPath();
}

マーカーをきれいにするためのループを除いて、これもうまくいきます。

さらに複雑なことに、私が路上で仕事をしているとき、マーカーが瞬時にまたは頻繁に動いているのを見たいと思います (egal)。

最初のコードのすぐ下に、その呼び出しを追加します。

var track_id = Markers.info()[0][0];
    Tracking.watch_id = navigator.geolocation.watchPosition(
    // Success
    function(position){
        var lat = position.coords.latitude;
        var long = position.coords.longitude;
        
        Tracking.data.push(lat, long);
        addMarker(lat, long);
    
    },
    // Error
    function(error){
        alert('Error occur on watchPositionError' + error.code + ':: ' + error.message);
    },
    // Settings
    { 
        frequency: 3000, 
        enableHighAccuracy: true 
    });

その後、毎回、配列 Tracking.markers がインクリメントされます

Tracking = {
    mapy : null,
    watch_id : null,    
    data : new Array(),
    markers : new Array()
}

私の問題はここ にあります 通りを移動すると、自分のマーカーが見えます。動けば動くほどマーカーがつきます。もちろん、私は最後のマーカーを持ちたいだけで、双子と新しい双子を持ちたくありません.

以前のマーカーを消去するにはどうすればよいですか? ご覧のとおり、上記でループを試しました

// Clean previous markers
    //google.maps.Map.prototype.clearOverlays = function() {
      for (var i = 0; i < Tracking.markers.length; i++ ) {

        Tracking.markers[i].setMap(null);
        console.log(Tracking.markers[i]);
      }
    //}

しかし、うまくいきませんでした。google.maps... で始まる行のコメントを外すと、何も機能しません。コメントのままにしておくと、すべてのマーカーが削除されます。だから私はマーカーを見ることができます...

移動後に現在地にマーカーを表示するのを手伝ってもらえますか?

4

0 に答える 0