Hiển thị Vị trí của tôi trên Google Maps API v3

Question

"My Location" in Google Maps javascript API

Câu hỏi này được hỏi hơn nửa năm trước. Đã cập nhật API Google Maps v3 để sử dụng nút "Vị trí của tôi" trên http://maps.google.com?

Vị trí của tôi là sự kiểm soát giữa người xem Chế độ xem phố và các nút điều khiển trông giống như trò chơi.

Nếu API Google Maps không cung cấp Vị trí của tôi thì tôi có cần viết tính năng định vị địa lý HTML5 của riêng mình bằng cách sử dụng navigator.gelocation sau đó tạo quyền kiểm soát của riêng tôi trên Google Maps không?

Answer 1

No, nhưng thêm dấu hiệu của riêng bạn dựa trên vị trí hiện tại là dễ dàng:

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

Chúng tôi đã thực hiện một phần như vậy cho Google Maps API v3. Ai cũng có thể sử dụng trong các dự án tùy chỉnh để thêm một điều khiển cho thấy định vị hiện tại chỉ với một dòng mã:

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

sau kể cả trong tiêu đề HTML JavaScript này:

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

Xem:

http://www.maptiler.com/maptilerlayer/

để có mã ví dụ và tài liệu.

Nó cho biết thêm sự kiểm soát tiêu chuẩn vào bản đồ - và một khi khai thác - nó cho thấy các vòng tròn màu xanh xung quanh vị trí của bạn với kích thước có nguồn gốc từ chính xác của dữ liệu vị trí có sẵn. Nếu bạn không kéo bản đồ, nó sẽ giữ cho bạn được định vị khi bạn di chuyển.

Điều khiển này đã được phát triển cho trình xem được tạo tự động bởi http://www.maptiler.com/ phần mềm - tạo ra các lớp phủ cho lớp phủ bản đồ và các lớp tùy chỉnh được tạo từ hình ảnh và địa lý raster.

Answer 4

bạn phải tự làm điều đó. Đây là một đoạn mã để thêm nút "Vị trí của bạn". HTML

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

CSS

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

JS

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