如何在谷歌地图中突出显示用户的当前位置？答案

【问题标题】：How to highlight a user's current location in google maps?如何在谷歌地图中突出显示用户的当前位置？
【发布时间】：2012-08-23 22:40:56
【问题描述】：

我正在使用以下代码来获取用户在 phonegap 中的位置（它工作正常）

function getLocation() {
    var win = function(position) {
        var lat = position.coords.latitude;
        var long = position.coords.longitude;
        var myLatlng = new google.maps.LatLng(lat, long);

        var myOptions = {
           center: myLatlng,
           zoom: 7,
           mapTypeId : google.maps.MapTypeId.ROADMAP
        };
        var  map_element = document.getElementById("displayMap");
        var map = new google.maps.Map(map_element, myOptions);
    };

    var fail = function(e) {
        alert('Error: ' + e);
    };

    var watchID = navigator.geolocation.getCurrentPosition(win, fail);
}

通过在地图上居中用户的当前位置可以正常工作。但我想在用户的位置上显示一个指示器（一个红点）。但我可以看到 google API 只提供了 3 个选项 center、zoom 和 mapTypeId。

是否有任何可用选项可用于突出显示该位置或是否有解决方法？

编辑

能够发现谷歌地图 API 有一个标记，可以突出显示任何位置。这看起来很有帮助，但它显示了一个默认的红色气球，可以通过自定义图像修改吗？

【问题讨论】：

标签： javascript google-maps google-maps-api-3 geolocation

【解决方案1】：

您可以使用新发布的GeolocationMarker，它是Google Maps API Utility Library 的一部分。

它将在用户的当前位置添加一个标记和精度圈。它还允许开发人员使用setMarkerOptions 方法并指定icon 属性来自定义标记。

【讨论】：

【解决方案2】：

您可以使用MarkerOptions 设置自定义图像。查看Google Maps Javascript API V3 Reference 了解有关 Google 地图的更多详细信息。

【讨论】：

【解决方案3】：

在标记内使用图标

    var Marker = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        position: "",
        icon: /bluedot.png
});

你可以使用这个类似于谷歌地图的谷歌地图位置指示圆形蓝点图标

【讨论】：