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
How to highlight a user's current location in google maps?
提问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 setMarkerOptions
method and specifying an icon
property.
它将在用户的当前位置添加一个标记和精度圆圈。它还允许开发人员使用setMarkerOptions
方法和指定icon
属性来自定义标记。
回答by Fawad Ali
回答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 地图的更多详细信息。