Javascript 如何在谷歌地图中添加我的位置按钮？

我想知道是否可以添加默认控件选项我的位置按钮

是否有任何方法将其设置为默认值，或者我需要使用地理位置设置按钮，然后触发该按钮上的单击事件，以便将用户导航到当前位置？

本身是它们的自定义实现。所以你必须自己做

AFIK Google maps API v3不提供任何“显示我的位置”的默认控件，但是实现自己的控件很简单

API v3提供了添加 以便于添加图标和编写事件处理程序 下文提到

使用“HTML5地理位置”，它将返回当前位置的位置

因此，使用lat/lng和 当您单击图标时，请处理该图标以放置

---

正如@Praveen所说，你必须自己做。下面是一段添加“您的位置”按钮的代码

HTML

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

JS

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

---

我稍微修改了mi3afzal的fiddle，以删除jQuery依赖项并添加retina支持。此外，我建议使用

center\u changed

事件，而不是

dragend

，因为可以通过编程更改中心，例如在添加标记和扩展边界时

var映射，
费萨拉巴德={lat:31.4181，液化天然气：73.0776}；
功能addYourLocationButton（地图、标记）
{
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.3）'；
firstChild.style.cursor='pointer'；
firstChild.style.marginRight='10px'；
firstChild.style.padding='0'；
firstChild.title='您的位置'；
controlDiv.appendChild（第一个孩子）；
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-2x.png)';
secondChild.style.backgroundSize='180px 18px'；
secondChild.style.backgroundPosition='0'；
secondChild.style.backgroundRepeat='no repeat'；
第一个孩子。第二个孩子；
google.maps.event.addListener（映射，'center_changed'，函数（）{
样式['background-position']='0'；
});
firstChild.addEventListener（'click'，函数（）{
var imgX=0，
animationInterval=setInterval（函数（）{
imgX=-imgX-18；
style['background-position']=imgX+'px 0'；
}, 500);
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var latlng=新的google.maps.latlng（position.coords.latitude，position.coords.longitude）；
地图设置中心（latlng）；
clearInterval（动画间隔）；
样式['background-position']='-144px 0'；
});
}否则{
clearInterval（动画间隔）；
样式['background-position']='0'；
}
});
controlDiv.index=1；
map.controls[google.maps.ControlPosition.RIGHT\u BOTTOM].push（controlDiv）；
}
map=new google.maps.map（document.getElementById（'map'）{
缩放：15，
中心：费萨拉巴德
});
var myMarker=new google.maps.Marker({
地图：地图，
动画：google.maps.animation.DROP，
职位：费萨拉巴德
});
addYourLocationButton（地图、myMarker）；

我们为谷歌地图API v3制作了这样一个组件。任何人都可以在自定义项目中添加显示当前地理位置的控件，只需一行代码：

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

在HTML标题中包含此JavaScript后：

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

见：

有关示例代码和文档

它将标准控件添加到地图中，点击后，它会显示位置周围的蓝色圆圈，大小根据可用位置数据的精度确定。如果你不拖动地图，它会在你移动后保持你的位置

此控件是为软件自动生成的查看器开发的，该软件为地图覆盖和由图像和光栅地理数据生成的自定义图层创建平铺

---

注：此答案是我们从

回复的回复，非常感谢！解决后我会检查的！事实上我是在晚上意识到的，这真的解释得很好！感谢您提到谷歌地图API和谷歌地图本身之间的关系。耶，太棒了！我刚刚更新了你的答案作为解决方案，因为我们有现成的组件，而不是定制。太好了，除了控制器的右下角位置的处理完全被打破。我刚刚给你发了一份bug报告，很遗憾它没有被公开跟踪。你知道有什么解决方法吗？这种方法让我的解决方案看起来很棒Fizal bhai，shukriya非常好的解决方案，而且它的效果非常好，兄弟。谢谢：）谢谢。找到当前位置时，请添加marker.setPosition（latlng）。