Cách di chuyển điểm đánh dấu trong API Google Maps

Tôi đang sử dụng API của Google Maps V3 và tôi đang cố gắng tạo điểm đánh dấu trên màn hình. Dưới đây là những gì tôi có:Cách di chuyển điểm đánh dấu trong API Google Maps

<!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>

Bây giờ những gì tôi đã cố gắng được thay thế // Di chuyển xe buýt với

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

Nhưng điều đó không làm gì cả. Đó là lệnh tôi thấy trên tham chiếu API. Tôi cũng tương đối mới với Javascript, do đó, nó có thể là một lỗi JS về phía tôi.

Nguồn

2011-11-06 gsingh2011

moveBus() được gọi trước initialize(). Hãy thử đặt dòng đó vào cuối hàm initialize() của bạn. Ngoài ra Lat/Lon 0,0 là tắt bản đồ (tọa độ của nó, không phải là pixel), vì vậy bạn không thể nhìn thấy nó khi nó di chuyển. Hãy thử 54,54. Nếu bạn muốn trung tâm của bản đồ di chuyển đến vị trí mới, hãy sử dụng 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; 
}

Script:

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

Nguồn

2011-11-06 02:59:58 ThinkingStiff

Đây có thể là một câu hỏi ngớ ngẩn, nhưng tại sao moveBus() được gọi trước khi khởi tạo() trong mã của tôi? Không kịch bản onload xảy ra trước bất cứ điều gì trong cơ thể? – gsingh2011

Lệnh moveBus() của bạn không nằm trong khối tải, chỉ là một khối tập lệnh trong cơ thể. Nó được phân tích cú pháp ngay sau khi nó được đọc. Bạn có thể làm một cái gì đó như: window.onload = function() {moveBus(); }; – ThinkingStiff

Bạn có thể giúp tôi bằng cách làm thế nào tôi có thể làm điều này mà không cần thêm bản đồ mới nhưng di chuyển điểm đánh dấu đến bản đồ hiện có? – Alexandros

Bạn đang sử dụng đúng API, nhưng biến "điểm đánh dấu" hiển thị cho toàn bộ tập lệnh. Tôi không thấy biến đánh dấu này được khai báo trên toàn cầu.

Nguồn

2011-11-06 02:42:04 Muthu

Theo http://www.w3schools.com/js/js_variables.asp chỉ định giá trị cho biến không khai báo khiến chúng trở thành toàn cầu. – gsingh2011

-4

sử dụng panto (x, y) .Th là sẽ giúp u

Nguồn

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>

Nguồn

2016-02-29 23:09:59 kimoduor

Chỉ cần cố gắng để tạo ra các dấu hiệu và thiết lập thuộc tính có thể kéo để true. Mã sẽ như sau:

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

Tôi hy vọng điều này sẽ hữu ích!

Nguồn

2017-09-21 12:46:18

Cách di chuyển điểm đánh dấu trong API Google Maps

Trả lời

Các vấn đề liên quan