Google मानचित्र: लाइव ड्राइंग और पॉलीलाइन

Question

अपडेट करना मैं जेएस में वास्तव में नौसिखिया हूं, इसलिए माफ करना, कि मेरे पास कोई कोड नहीं है, 'मैंने जो कुछ किया है - "Google Map डॉक्स से" helloworld "उदाहरण हैं।

तो, कोई समस्या क्या है: मैं उपयोगकर्ता की वर्तमान स्थिति के आधार पर एक पॉलीलाइन खींचना चाहता हूं। तो, प्रत्येक google.maps.LatLng() इस समय निर्देशांक होना चाहिए। मानचित्र पर अद्यतन करने के लिए पूरी तरह से उभरना चाहिए, उदाहरण के लिए, 5 सेकंड प्रति बार। आखिरी बात यह है कि यह एक मानचित्र पर चलने वाली सुबह की कल्पना की तरह है, ऐसा कुछ।

मुझे पता है, कैसे एक नक्शा "आकर्षित" करने के लिए और वर flightPlanCoordinates [] में अंक जोड़ने के लिए, और मैं कुछ उदाहरण या लिंक, मैं कहाँ मिल सकता है के लिए पूछना:

• कैसे एक मौजूदा जोड़ने वर flightPlanCoordinates में स्थिति []
• कैसे "लाइव" मोड में यह सब सामान को अपडेट करने में कर

किसी भी मदद के लिए धन्यवाद :)

युपीडी:

इस तरह सामान करने का प्रयास कर, लेकिन

var path = poly.getPath(); 

var latitude = position.coords.latitude; 
var longitude = position.coords.longitude; 

path.push(new google.maps.LatLng(latitude, longitude)); 

UPD2 काम नहीं करता: http://kasheftin.github.io/gmaps/ यहाँ शांत उदाहरण है, यह कैसे किया जाना चाहिए

Answer 1

आपको पॉलीलाइन को नए पथ (पथ जो नए बिंदु से अपडेट किया गया है) के साथ अद्यतन करने की आवश्यकता है:

// get existing path 
var path = poly.getPath(); 
// add new point 
path.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); 
// update the polyline with the updated path 
poly.setPath(path); 

कोड स्निपेट: (पॉलीलाइन को अंक जोड़ने के लिए नक्शे पर क्लिक करें)

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var poly = new google.maps.Polyline({ 
 
    map: map, 
 
    path: [] 
 
    }) 
 
    google.maps.event.addListener(map, 'click', function(evt) { 
 
    // get existing path 
 
    var path = poly.getPath(); 
 
    // add new point (use the position from the click event) 
 
    path.push(new google.maps.LatLng(evt.latLng.lat(), evt.latLng.lng())); 
 
    // update the polyline with the updated path 
 
    poly.setPath(path); 
 
    }) 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

Answer 2

नीचे कोड का प्रयास करें:

var path = poly.getPath().getArray(); 
path.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); 
poly.setPath(path); 

Answer 3

फिलहाल, एपीआई आपको केवल ऑब्जेक्ट कोपर धक्का देना होगाइसे मानचित्र पर अपडेट किया जाएगा।

उनके Complex Polyline उदाहरण दिखाता है के रूप में, आप कर सकते हैं:

var path = poly.getPath() 
path.push(latLng) 

कहाँ poly अपने google.maps.Polyline और latLng एक google.maps.LatLng है।