Google Maps APIでマーカーを移動する方法

Google Maps API V3を使用していますが、画面上でマーカーを移動しようとしています。ここで私が持っているものです。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>

今、私は

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

でバスを移動//置き換えてみましたしかし、それは何もしなかったものを。それはAPIリファレンスで見たコマンドです。私はJavascriptにも比較的新しいので、私のところはJSエラーかもしれません。

出典

2011-11-06 gsingh2011

moveBus()initialize()より前に呼び出されています。その行をinitialize()関数の最後に置いてみてください。また、Lat/Lon 0,0はマップから外れています（ピクセルではなく座標）ので、移動すると表示されません。試してください54,54。マップの中心を新しい場所に移動する場合は、panTo()を使用します。

デモ：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; 
}

スクリプト：

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

出典

2011-11-06 02:59:58 ThinkingStiff

これはちょっと疑問に思うかもしれませんが、私のコードでinitialize（）の前にmoveBus（）が呼ばれているのはなぜですか？ onloadスクリプトは体内の何よりも先に発生しませんか？ – gsingh2011

あなたのmoveBus（）呼び出しは、本体のスクリプトブロックだけのonloadブロックにはありません。それは読み込まれるとすぐに解析されます。次のようなことができます：window.onload = function（）{moveBus（）; }; – ThinkingStiff

新しい地図を追加せずにマーカーを既存のマップに移動する方法を教えてください。 – Alexandros

正しいAPIを使用していますが、スクリプト全体に表示される「マーカー」変数です。このマーカー変数がグローバルに宣言されているとは思われません。

出典

2011-11-06 02:42:04 Muthu

http://www.w3schools.com/js/js_variables.aspによると、宣言されていない変数に値を代入すると、その変数はグローバルになります。 – gsingh2011

-4

使用panToの（x、y）は.TH uは

出典

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>

出典

2016-02-29 23:09:59 kimoduor

だけでマーカーを作成し、trueにドラッグ可能なプロパティを設定しようとするのに役立ちますです。次のようにコードが何かになります：

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

私はこれが役に立てば幸い！

出典

2017-09-21 12:46:18

Google Maps APIでマーカーを移動する方法

答えて

関連する問題