如何在 Google 地图中添加我的位置按钮？

Question

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

有什么方法可以将其设为默认值，或者我需要制作带有地理位置的按钮，然后触发该按钮上的点击事件，以便将用户导航到当前位置？

Answer 1

正如@Praveen 所说，您必须自己动手。这是一段添加“您的位置”按钮的代码。 JS fiddle link

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

Answer 2

我稍微修改了 mi3afzal 的小提琴以删除 jQuery 依赖并添加视网膜支持。另外，我建议使用center_changed 事件而不是dragend，因为可以通过编程方式更改中心，例如添加标记和扩展边界时。

https://jsfiddle.net/ogsvzacz/6/.

var map,
    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 = '0';
    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-2x.png)';
    secondChild.style.backgroundSize = '180px 18px';
    secondChild.style.backgroundPosition = '0 0';
    secondChild.style.backgroundRepeat = 'no-repeat';
    firstChild.appendChild(secondChild);

    google.maps.event.addListener(map, 'center_changed', function () {
        secondChild.style['background-position'] = '0 0';
    });

    firstChild.addEventListener('click', function () {
        var imgX = 0,
            animationInterval = setInterval(function () {
                imgX = -imgX - 18 ;
                secondChild.style['background-position'] = imgX+'px 0';
            }, 500);

        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                map.setCenter(latlng);
                clearInterval(animationInterval);
                secondChild.style['background-position'] = '-144px 0';
            });
        } else {
            clearInterval(animationInterval);
            secondChild.style['background-position'] = '0 0';
        }
    });

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


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

Answer 3

Google maps 本身是他们的Google maps API 的自定义实现。所以你必须自己做。

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

1. API v3 提供了添加custom controls 的能力 映射到地图，以便您可以轻松添加图标并将事件处理程序编写为 如下所述。
2. 使用“HTML5 地理位置”，它会返回您当前位置的位置。
3. 所以使用 lat/lng 和 当你点击图标时，它会放置一个marker。

Answer 4

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

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

在 HTML 标头中包含此 JavaScript 之后：

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

见：

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

获取示例代码和文档。

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

此控件是为 http://www.maptiler.com/ 软件自动生成的查看器开发的 - 该软件为地图叠加层和由图像和栅格地理数据制成的自定义图层创建切片。

注意：这个答案是我们对Show My Location on Google Maps API v3的回复的转贴