在 Google Maps API v3 上显示我的位置

Posted 2023-02-23

【中文标题】在 Google Maps API v3 上显示我的位置

【英文标题】：Show My Location on Google Maps API v3

【发布时间】：2012-02-26 21:47:36

【问题描述】：

"My Location" in Google Maps javascript API

这个问题是半年前提出的。 Google Maps API v3 是否已更新为使用http://maps.google.com 上的“我的位置”按钮？

我的位置是街景人和游戏手柄外观控件之间的控件。

如果 Google Maps API 不提供“我的位置”，那么我是否需要使用 navigator.gelocation 编写自己的 html5 地理定位功能，然后在 Google 地图上创建自己的控件？

【参考方案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) 
        // ...
    );

【讨论】：

谢谢。我最终创建了一个自定义控件并添加了一个点击监听器。当侦听器触发它时，它几乎完成了您输入的操作：向用户的位置添加一个标记。

非常感谢！！不过，如果您使用它，您可能需要下载托管在 [link](maps.gstatic.com/mapfiles/mobile/mobileimgs2.png) 的图像并将其保存在本地服务器中。如果不这样做，您将始终依赖另一台服务器的连接以及您的连接。通过下载图像，一切都应该更加顺畅

公平地说，这是一个谷歌服务器。如果它已关闭，则 Maps API 也无法正常工作。

但是当用户移动时如何重绘位置图标呢？就我而言，它每次都会创建一个新的

您可以直接发邮件至icon : 'path/to/icon.png'

【参考方案2】：

我们为 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/ 软件自动生成的查看器开发的 - 该软件为地图叠加层和由图像和栅格地理数据制成的自定义图层创建切片。

【讨论】：

不知何故 GeolocationControl 不显示给我（即使我使用文档中完全相同的代码）。该库的所有其他功能都对我有用。该按钮是否存在已知问题？

地理位置图标在包含 `var geoloccontrol = new klokantech.GeolocationControl(map, mapMaxZoom); 后不显示

我改变了“var geoloccontrol = new klokantech.GeolocationControl(map, mapMaxZoom);”到“var geoloccontrol = new klokantech.GeolocationControl(map);”它奏效了。基本上我删除了未初始化的可选 opt_zoom 参数。或者，您可以将“mapMaxZoom”替换为实际值，该值将是获取初始位置后地图将切换到的缩放级别。现在，有谁知道如何覆盖默认的“我的位置”按钮大小？与最近经过重新设计以具有更大 UI 按钮的新 Google Maps API 相比，它非常小。

当我在浏览器中看到地图时，一切正常，但是当我使用 Apache Cordova 构建一个 android 移动应用程序时，我没有得到相同的结果，为什么？问题是，尽管我使用与浏览器上完全相同的代码，但按钮不可见，是否有另一种方法可以连续显示 Apache Cordova 移动应用程序中的当前位置？谢谢

【参考方案3】：

你必须自己做。这是一段添加“您的位置”按钮的代码。 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();
); 

【参考方案4】：

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

【讨论】：

这个地理定位示例甚至没有显示任何谷歌地图代码。