गूगल मैप्स एपीआई v3

Question

"My Location" in Google Maps javascript API

यह सवाल पूछा गया था पर मेरा स्थान दिखाएँ आधा एक साल पहले। क्या Google मानचित्र API v3 ने http://maps.google.com पर "मेरा स्थान" बटन का उपयोग करने के लिए अद्यतन किया है?

मेरा स्थान सड़क दृश्य आदमी और गेमपैड-दिखने वाले नियंत्रणों के बीच नियंत्रण है।

यदि Google मानचित्र API मेरा स्थान प्रदान नहीं करता है तो क्या मुझे navigator.gelocation का उपयोग करके अपना स्वयं का HTML5 भौगोलिक स्थान सुविधा लिखनी होगी, फिर Google मानचित्र पर अपना स्वयं का नियंत्रण बनाएं?

Answer 1

No, लेकिन वर्तमान स्थान पर आधारित अपनी खुद की मार्कर जोड़ने आसान है:

var myloc = new google.maps.Marker({ 
    clickable: false, 
    icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png', 
                new google.maps.Size(22,22), 
                new google.maps.Point(0,18), 
                new google.maps.Point(11,11)), 
    shadow: null, 
    zIndex: 999, 
    map: // your google.maps.Map object 
}); 

if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(pos) { 
    var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); 
    myloc.setPosition(me); 
}, function(error) { 
    // ... 
}); 

Answer 2

//copy and paste this in your script section. 
if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(success, error); 
} else { 
    alert('location not supported'); 
} 

//callbacks 
function error(msg) { 
    alert('error in geolocation'); 
} 

function success(position) { 
    var lats = position.coords.latitude; 
    var lngs = position.coords.longitude; 
    alert(lats); 
    alert(lngs) 
}; 

Answer 3

हम गूगल मैप्स एपीआई v3 के लिए इस तरह के एक घटक बना दिया है। इस जावास्क्रिप्ट HTML शीर्षक में शामिल होने के बाद

var geoloccontrol = new klokantech.GeolocationControl(map, mapMaxZoom); 

: किसी को बस कोड का एक लाइन के साथ वर्तमान भौगोलिक स्थान को दर्शाने वाला एक नियंत्रण जोड़ने के लिए कस्टम परियोजनाओं में उपयोग कर सकते हैं

<script src="https://cdn.klokantech.com/maptilerlayer/v1/index.js"></script> 

देखें:

http://www.maptiler.com/maptilerlayer/ उदाहरण कोड और दस्तावेज़ीकरण के लिए

।

यह नक्शा करने के लिए मानक नियंत्रण कहते हैं - और एक बार उपयोग किया है - यह उपलब्ध स्थान डेटा की शुद्धता से प्राप्त आकार के साथ अपने स्थान के आसपास नीले वृत्त को दर्शाता है। यदि आप मानचित्र को खींच नहीं पाते हैं तो यह आपके स्थानांतरित होने के बाद आपको स्थानांतरित रखेगा।

यह नियंत्रण दर्शक को स्वचालित रूप से http://www.maptiler.com/ सॉफ़्टवेयर द्वारा जेनरेट किया गया है - जो नक्शा ओवरले और छवियों और रास्टर geodata से बने कस्टम परतों के लिए टाइल्स बनाता है।

Answer 4

आपको इसे स्वयं करना है। "आपका स्थान" बटन जोड़ने के लिए कोड का एक टुकड़ा यहां दिया गया है। एचटीएमएल

<div id="map">Map will be here</div> 

सीएसएस

#map {width:100%;height: 400px;} 

जे एस

var map; 
var faisalabad = {lat:31.4181, lng:73.0776}; 

function addYourLocationButton(map, marker) 
{ 
    var controlDiv = document.createElement('div'); 

    var firstChild = document.createElement('button'); 
    firstChild.style.backgroundColor = '#fff'; 
    firstChild.style.border = 'none'; 
    firstChild.style.outline = 'none'; 
    firstChild.style.width = '28px'; 
    firstChild.style.height = '28px'; 
    firstChild.style.borderRadius = '2px'; 
    firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)'; 
    firstChild.style.cursor = 'pointer'; 
    firstChild.style.marginRight = '10px'; 
    firstChild.style.padding = '0px'; 
    firstChild.title = 'Your Location'; 
    controlDiv.appendChild(firstChild); 

    var secondChild = document.createElement('div'); 
    secondChild.style.margin = '5px'; 
    secondChild.style.width = '18px'; 
    secondChild.style.height = '18px'; 
    secondChild.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-1x.png)'; 
    secondChild.style.backgroundSize = '180px 18px'; 
    secondChild.style.backgroundPosition = '0px 0px'; 
    secondChild.style.backgroundRepeat = 'no-repeat'; 
    secondChild.id = 'you_location_img'; 
    firstChild.appendChild(secondChild); 

    google.maps.event.addListener(map, 'dragend', function() { 
     $('#you_location_img').css('background-position', '0px 0px'); 
    }); 

    firstChild.addEventListener('click', function() { 
     var imgX = '0'; 
     var animationInterval = setInterval(function(){ 
      if(imgX == '-18') imgX = '0'; 
      else imgX = '-18'; 
      $('#you_location_img').css('background-position', imgX+'px 0px'); 
     }, 500); 
     if(navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
       var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
       marker.setPosition(latlng); 
       map.setCenter(latlng); 
       clearInterval(animationInterval); 
       $('#you_location_img').css('background-position', '-144px 0px'); 
      }); 
     } 
     else{ 
      clearInterval(animationInterval); 
      $('#you_location_img').css('background-position', '0px 0px'); 
     } 
    }); 

    controlDiv.index = 1; 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv); 
} 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: faisalabad 
    }); 
    var myMarker = new google.maps.Marker({ 
     map: map, 
     animation: google.maps.Animation.DROP, 
     position: faisalabad 
    }); 
    addYourLocationButton(map, myMarker); 
} 

$(document).ready(function(e) { 
    initMap(); 
});