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

时间:2012-08-29 10:31:32

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

我正在使用以下代码来获取用户在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);
}

通过将用户的当前位置集中在地图上,这可以正常工作。但我想在用户的位置显示一个指示符(红点)。但我可以看到谷歌API只提供3个选项中心,缩放和mapTypeId。

是否有可用于突出显示位置的可用选项或是否有解决方法?

修改

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

3 个答案:

答案 0 :(得分:12)

您可以使用GeolocationMarker中新发布的Google Maps API Utility Library

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

答案 1 :(得分:4)

在标记内使用图标,如

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

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

enter image description here

答案 2 :(得分:1)

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