Html 在 Google Maps API v3 上显示我的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9142833/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show My Location on Google Maps API v3
提问by hobbes3
"My Location" in Google Maps javascript API
Google Maps javascript API 中的“我的位置”
This question was asked over half a year ago. Has Google Maps API v3 updated to use the "My Location" button found on http://maps.google.com?
这个问题是半年前问的。Google Maps API v3 是否已更新为使用http://maps.google.com上的“我的位置”按钮？
My Location is the control between the Street View man and the gamepad-looking controls.
我的位置是街景男人和游戏手柄外观控件之间的控件。
If Google Maps API doesn't provide My Location then do I need to write my own HTML5 geolocation feature using navigator.gelocationthen create my own control on Google Maps?
如果 Google Maps API 不提供我的位置，那么我是否需要编写自己的 HTML5 地理定位功能，navigator.gelocation然后在 Google 地图上创建自己的控件？
回答by josh3736
No, but adding your own marker based on current location is easy:
不，但是根据当前位置添加您自己的标记很容易：
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) {
// ...
});
}
回答by Klokan Technologies
We have made such a component for Google Maps API v3. Anybody can use in custom projects to add a control showing current geolocation with just one line of code:
我们为 Google Maps API v3 制作了这样一个组件。任何人都可以在自定义项目中使用一行代码添加一个显示当前地理位置的控件：
var geoloccontrol = new klokantech.GeolocationControl(map, mapMaxZoom);
after including in the HTML header this JavaScript:
在 HTML 标头中包含此 JavaScript 后：
<script src="https://cdn.klokantech.com/maptilerlayer/v1/index.js"></script>
See:
看：
http://www.maptiler.com/maptilerlayer/
http://www.maptiler.com/maptilerlayer/
for an example code and documentation.
示例代码和文档。
It adds the standard control to the map - and once tapped - it shows the blue circle around your location with size derived from precision of the location data available. If you don't drag the map it will keep you positioned once you move.
它将标准控件添加到地图 - 一旦点击 - 它会显示您所在位置周围的蓝色圆圈，其大小源自可用位置数据的精度。如果你不拖动地图，它会在你移动后保持你的位置。
This control has been developed for viewer automatically generated by http://www.maptiler.com/software - which creates tiles for map overlays and custom layers made from images and raster geodata.
此控件是为http://www.maptiler.com/软件自动生成的查看器开发的 - 该软件为地图叠加层和由图像和栅格地理数据制成的自定义图层创建切片。
回答by mi3afzal
you have to do it by your own. Here is a piece of code to add "Your Location" button. HTML
你必须自己做。这是添加“您的位置”按钮的一段代码。 HTML
<div id="map">Map will be here</div>
CSS
CSS
#map {width:100%;height: 400px;}
JS
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();
});
回答by Jitendra Tyagi
//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)
};
