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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12175931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 07:18:43  来源:igfitidea点击:

How to highlight a user's current location in google maps?

javascriptgoogle-mapsgoogle-maps-api-3geolocation

提问by Kamal

I am using following code to get the location of user in phonegap (it works fine)

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

This is working fine by centering the user's current location on the map. But I would like to show an indicator (a red dot) on the user's location. But I can see that google API provide only 3 options center, zoom and mapTypeId.

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

Are there any available options that can be used to highlight the position or is there a workaround?

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

EDIT

编辑

Was able to find that google maps API has a marker ho highlight any position. That looks helpful, but that shows a default red balloon, can that be modified by a custom image?

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

回答by Chad Killingsworth

You can use the newly released GeolocationMarkerwhich is part of the Google Maps API Utility Library.

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

It will add a marker and accuracy circle at the user's current location. It also allows a developer to customize the marker using the setMarkerOptionsmethod and specifying an iconproperty.

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

回答by Fawad Ali

Use icon inside marker like

在标记内使用图标,例如

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

you can use this google map location indication circular blue dot icon similar to the google map

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

enter image description here

在此处输入图片说明

回答by Daniel

You can use MarkerOptionsto set a custom image. Check the Google Maps Javascript API V3 Referenceto more details about Google Maps.

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