Html 在谷歌地图API v3上显示我的位置

这个问题是半年前提出的。Google Maps API v3是否已更新，以使用上的“我的位置”按钮

我的位置是街景人和gamepad外观控件之间的控件

如果Google Maps API不提供我的位置，那么我是否需要使用

导航器编写我自己的HTML5地理位置功能。gelocation

然后在Google Maps上创建我自己的控件？

，但是根据当前位置添加您自己的标记很容易：

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) {
        // ...
    });
}

---

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

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

在HTML标题中包含此JavaScript后：

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

见：

有关示例代码和文档

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

---

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

您必须自己完成此操作。下面是一段添加“您的位置”按钮的代码。 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();
}); 

---

谢谢我最终创建了一个自定义控件并添加了一个单击侦听器。当监听器触发它时，它几乎完成了您键入的操作：向用户的位置添加一个标记。非常感谢！！不过，如果使用此选项，您可能希望下载托管在[link]（maps.gstatic.com/mapfiles/mobile/mobileimgs2.png）上的图像，并将其保存在服务器本地。如果不这样做，您总是依赖另一台服务器的连接和您的连接。通过下载图片，一切都会更加顺畅。公平地说，这是一个谷歌服务器。如果它关闭，地图API也不工作。但是当用户移动时，如何重新绘制位置图标？在我的例子中，它只是每次创建一个新的GeolocationControl（即使我使用文档中完全相同的代码），但是GeolocationControl并没有为我显示。该库的所有其他功能对我都适用。是否存在与该按钮相关的已知问题？包含'var geoloccontrol=new klokantech.geoloccontrol（map，mapMaxZoom）后，地理位置图标不显示；cdn.klokantech.com/maptilerlayer/v1/index.js“>`在我的文件中我更改了”var geoloccontrol=new klokantech.geoloccationcontrol（map，mapMaxZoom）；“to”var geoloccontrol=new klokantech.geoloccontrol（map）；“它成功了。基本上我删除了未初始化的可选opt_zoom参数。或者，你可以用实际值替换“mapMaxZoom”，这将是地图在获得初始位置后将切换到的缩放级别。现在，有人知道如何覆盖默认的“我的位置”按钮大小吗？相比之下，它非常小最新的Google Maps API最近被修改为具有更大的UI按钮。当我在浏览器中看到地图时，一切正常，但当我使用Apache Cordova构建android移动应用程序时，我没有得到相同的结果，为什么？问题是，尽管我使用的代码与浏览器上的完全相同，但按钮不可见，是吗e另一种方法是在Apache Cordova移动应用程序中连续显示当前位置？谢谢这个地理位置示例甚至没有显示任何google地图代码。

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