Google मानचित्र API

में मार्कर को कैसे स्थानांतरित करें मैं Google मानचित्र API V3 का उपयोग कर रहा हूं और मैं स्क्रीन पर मार्कर स्थानांतरित करने की कोशिश कर रहा हूं। यहाँ मैं क्या है:Google मानचित्र 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));

साथ बस ले जाएँ को बदल रहा है लेकिन वह कुछ भी नहीं किया। एपीआई संदर्भ पर मैंने देखा यह आदेश है। मैं जावास्क्रिप्ट के लिए अपेक्षाकृत नया हूं, इसलिए यह मेरे हिस्से पर एक जेएस त्रुटि हो सकती है।

स्रोत

2011-11-06 gsingh2011

moveBus()initialize() से पहले कॉल किया जा रहा है। अपने initialize() फ़ंक्शन के अंत में उस पंक्ति को डालने का प्रयास करें। इसके अलावा लेट/लॉन 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>

सीएसएस:

#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

यह एक बेवकूफ सवाल हो सकता है, लेकिन moveBus() को मेरे कोड में प्रारंभ करने से पहले क्यों कहा जाता है? क्या शरीर में किसी भी चीज़ से पहले अधिभार स्क्रिप्ट नहीं होती है? – gsingh2011

आपका moveBus() कॉल एक ऑनलोड ब्लॉक में नहीं है, केवल शरीर में एक स्क्रिप्ट ब्लॉक है। जैसे ही इसे पढ़ा जाता है, इसे पार्स किया जाता है। आप कुछ ऐसा कर सकते हैं: 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 (एक्स, वाई) वें यू

स्रोत

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 मानचित्र API

उत्तर

संबंधित मुद्दे