Jak przenieść znacznik w Google Maps API

Używam Google Maps API V3 i próbuję zrobić ruch znacznika na ekranie. Oto co mam:Jak przenieść znacznik w Google Maps API

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=false"> 
</script> 
<script type="text/javascript"> 
function initialize() { 
    var myLatLng = new google.maps.LatLng(50,50); 
    var myOptions = { 
    zoom: 4, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    image = 'bus.gif'; 
    marker = new google.maps.Marker({position: myLatLng, map: map, icon: image}); 

    marker.setMap(map); 
} 

function moveBus() 
{ 
    // Move Bus 
} 

</script> 
</head> 

<body onload="initialize()"> 
<script type="text/javascript"> 
moveBus(); 
</script> 
<div id="map_canvas" style="height: 500px; width: 500px;"></div> 

</body> 
</html>

Teraz co Próbowałem zastępuje // Przenieś Bus z

marker.setPosition(new google.maps.LatLng(0,0));

Ale to nic nie robić. To jest polecenie, które widziałem w referencji API. Jestem też względnie nowy w JavaScript, więc może to być błąd JS z mojej strony.

Źródło

2011-11-06 gsingh2011

moveBus() jest wywoływana przed initialize(). Spróbuj umieścić tę linię na końcu swojej funkcji initialize(). Również Lat/Lon 0,0 jest poza mapą (to współrzędne, nie piksele), więc nie możesz go zobaczyć, kiedy się porusza. Spróbuj 54,54. Jeśli chcesz, aby środek mapy przenosił się do nowej lokalizacji, użyj panTo().

Demo: http://jsfiddle.net/ThinkingStiff/Rsp22/

HTML:

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<div id="map-canvas"></div>

CSS:

#map-canvas 
{ 
height: 400px; 
width: 500px; 
}

Scenariusz:

function initialize() { 

    var myLatLng = new google.maps.LatLng(50, 50), 
     myOptions = { 
      zoom: 4, 
      center: myLatLng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      }, 
     map = new google.maps.Map(document.getElementById('map-canvas'), myOptions), 
     marker = new google.maps.Marker({position: myLatLng, map: map}); 

    marker.setMap(map); 
    moveBus(map, marker); 

} 

function moveBus(map, marker) { 

    marker.setPosition(new google.maps.LatLng(0, 0)); 
    map.panTo(new google.maps.LatLng(0, 0)); 

}; 

initialize();

Źródło

2011-11-06 02:59:58 ThinkingStiff

To może być głupie pytanie, ale dlaczego wywołanie funkcji moveBus() przed zainicjalizowaniem() w moim kodzie? Czy skrypt onload nie występuje przed wszystkim w ciele? – gsingh2011

Twoje wywołanie moveBus() nie znajduje się w bloku onload, tylko blok skryptu w ciele. Zostanie sparsowany, gdy tylko zostanie odczytany. Możesz zrobić coś takiego: window.onload = function() {moveBus(); }; – ThinkingStiff

Czy możesz mi pomóc, jak mogę to zrobić bez dodawania nowej mapy, ale przenieść znacznik do istniejącego? – Alexandros

Używasz poprawnego API, ale jest to zmienna "znacznik" widoczna dla całego skryptu. Nie widzę tej zmiennej znacznika zadeklarowanej globalnie.

Źródło

2011-11-06 02:42:04 Muthu

Według http://www.w3schools.com/js/js_variables.asp przypisanie wartości niezadeklarowanym zmiennym powoduje, że są one globalne. – gsingh2011

-4

użycie panto (x, y) .TH to pomoże u

Źródło

2012-12-07 12:04:38 user1884506

<style> 
    #frame{ 
     position: fixed; 
     top: 5%; 
     background-color: #fff; 
     border-radius: 5px; 
     box-shadow: 0 0 6px #B2B2B2; 
     display: inline-block; 
     padding: 8px 8px; 
     width: 98%; 
     height: 92%; 
     display: none; 
     z-index: 1000; 
    } 
    #map{ 
     position: fixed; 
     display: inline-block; 
     width: 99%; 
     height: 93%; 
     display: none; 
     z-index: 1000; 
    } 

    #loading{ 
     position: fixed; 
     top: 50%; 
     left: 50%; 
     opacity: 1!important; 
     margin-top: -100px; 
     margin-left: -150px; 
     background-color: #fff; 
     border-radius: 5px; 
     box-shadow: 0 0 6px #B2B2B2; 
     display: inline-block; 
     padding: 8px 8px; 
     max-width: 66%; 
     display: none; 
     color: #000; 

    } 
    #mytitle{ 
     color: #FFF; 
     background-image: linear-gradient(to bottom,#d67631,#d67631); 
     // border-color: rgba(47, 164, 35, 1); 
     width: 100%; 
     cursor: move; 
    } 
    #closex{ 
     display: block; 
     float:right; 
     position:relative; 
     top:-10px; 
     right: -10px; 
     height: 20px; 
     cursor: pointer; 
    } 
    .pointer{ 
     cursor: pointer !important; 
    } 

</style> 
<div id="loading"> 
    <i class="fa fa-circle-o-notch fa-spin fa-2x"></i> 
    Loading... 
</div> 
<div id="frame"> 
    <div id="headerx"></div> 
    <div id="map" >  
    </div> 
</div> 


<?php 
$url = Yii::app()->baseUrl . '/reports/reports/transponderdetails'; 
?> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 

<script> 
    function clode() { 
     $('#frame').hide(); 
     $('#frame').html(); 
    } 
    function track(id) { 
     $('#loading').show(); 
     $('#loading').parent().css("opacity", '0.7'); 


     $.ajax({ 
      type: "POST", 
      url: '<?php echo $url; ?>', 
      data: {'id': id}, 
      success: function(data) { 
       $('#frame').show(); 
       $('#headerx').html(data); 
       $('#loading').parents().css("opacity", '1'); 
       $('#loading').hide(); 
       var thelat = parseFloat($('#lat').text()); 
       var long = parseFloat($('#long').text()); 
       $('#map').show(); 
       var lat = thelat; 
       var lng = long; 
       var orlat=thelat; 
       var orlong=long; 
       //Intialize the Path Array 
       var path = new google.maps.MVCArray(); 
       var service = new google.maps.DirectionsService(); 


       var myLatLng = new google.maps.LatLng(lat, lng), myOptions = {zoom: 4, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP}; 
       var map = new google.maps.Map(document.getElementById('map'), myOptions); 
       var poly = new google.maps.Polyline({map: map, strokeColor: '#4986E7'}); 
       var marker = new google.maps.Marker({position: myLatLng, map: map}); 

       function initialize() { 
        marker.setMap(map); 
        movepointer(map, marker); 
        var drawingManager = new google.maps.drawing.DrawingManager(); 
        drawingManager.setMap(map); 
       } 

       function movepointer(map, marker) { 
        marker.setPosition(new google.maps.LatLng(lat, lng)); 
        map.panTo(new google.maps.LatLng(lat, lng)); 

        var src = myLatLng;//start point 
        var des = myLatLng;// should be the destination 
        path.push(src); 
        poly.setPath(path); 
        service.route({ 
         origin: src, 
         destination: des, 
         travelMode: google.maps.DirectionsTravelMode.DRIVING 
        }, function(result, status) { 
         if (status == google.maps.DirectionsStatus.OK) { 
          for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
           path.push(result.routes[0].overview_path[i]); 
          } 
         } 
        }); 

       } 
       ; 

       // function() 
       setInterval(function() { 
        lat = Math.random() + orlat; 
        lng = Math.random() + orlong; 
        console.log(lat + "-" + lng); 
        myLatLng = new google.maps.LatLng(lat, lng); 
        movepointer(map, marker); 

       }, 1000); 



      }, 
      error: function() { 
       $('#frame').html('Sorry, no details found'); 
      }, 
     }); 
     return false; 
    } 
    $(function() { 
     $("#frame").draggable(); 
    }); 

</script>

Źródło

2016-02-29 23:09:59 kimoduor

Wystarczy spróbować, aby utworzyć znacznik i ustaw właściwość Draggable do true. Kod będzie coś w następujący sposób:

Marker = new google.maps.Marker({ 
    position: latlon, 
    map: map,    
    draggable: true, 
    title: "Drag me!" 
});

Mam nadzieję, że to pomoże!

Źródło

2017-09-21 12:46:18

Jak przenieść znacznik w Google Maps API

Odpowiedz

Powiązane problemy