顯示我的谷歌地圖API V3

Question

"My Location" in Google Maps javascript API

這個問題被問過的位置在一年半前。 Google Maps API v3是否已更新爲使用http://maps.google.com上的「我的位置」按鈕？

我的位置是街景視圖和遊戲手柄控件之間的控件。

如果Google Maps 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

我們已經做出了這樣的組件，用於谷歌地圖API第3版。任何人都可以在自定義項目中使用添加顯示只用一行代碼當前地理位置的控制：包括在HTML頭這個JavaScript後

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/軟件自動生成的查看器開發的，該軟件爲地圖疊加層和由圖像和柵格地理數據製作的自定義圖層創建拼貼。

Answer 4

你必須自己做。這是一段添加「您的位置」按鈕的代碼。 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(); 
});