Cómo mover un marcador en Google Maps API

Estoy usando Google Maps API V3 y estoy tratando de hacer un movimiento de marcador a través de la pantalla. Aquí es lo que tengo:Cómo mover un marcador en 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>

Ahora lo que he tratado es la sustitución // Mover autobús con

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

Pero eso no hice nada. Ese es el comando que vi en la referencia de la API. También soy relativamente nuevo en Javascript, por lo que podría ser un error JS de mi parte.

Fuente

2011-11-06 gsingh2011

moveBus() recibe una llamada antes de initialize(). Intente poner esa línea al final de su función initialize(). También Lat/Lon 0,0 está fuera del mapa (son coordenadas, no píxeles), por lo que no puede verlo cuando se mueve. Prueba 54,54. Si desea que el centro del mapa se mueva a la nueva ubicación, use panTo().

Demostración: 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; 
}

Guión:

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();

Fuente

2011-11-06 02:59:58 ThinkingStiff

Esto podría ser una pregunta tonta, pero ¿por qué se llama moveBus() antes de initialize() en mi código? ¿El script de carga no sucede antes de nada en el cuerpo? – gsingh2011

Su llamada a moveBus() no está en un bloque de carga, solo un bloque de script en el cuerpo. Se analiza en cuanto se lee. Podría hacer algo como: window.onload = function() {moveBus(); }; – ThinkingStiff

¿Puede ayudarme con cómo puedo hacer esto sin agregar un nuevo mapa sino mover el marcador a uno existente? – Alexandros

Está utilizando la API correcta, pero es la variable "marcador" visible para todo el script. No veo esta variable de marcador declarada globalmente.

Fuente

2011-11-06 02:42:04 Muthu

Según http://www.w3schools.com/js/js_variables.asp asignar un valor a las variables no declaradas las hace globales. – gsingh2011

-4

uso panTo (x, y) .TH Es ayudará u

Fuente

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>

Fuente

2016-02-29 23:09:59 kimoduor

sólo tratar de crear el marcador y establecer la propiedad que pueden arrastrarse a true. El código será algo de la siguiente manera:

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

espero que esto ayude!

Fuente

2017-09-21 12:46:18

Cómo mover un marcador en Google Maps API

Respuesta

Cuestiones relacionadas