如何在function getCurrentPosition后自动居中我的位置？
在前端开发中，可以通过以下步骤来实现在获取当前位置后自动居中显示：
- 使用Geolocation API的getCurrentPosition方法获取当前位置的经纬度信息。
- 在获取到经纬度信息后，可以通过地图API（如腾讯地图API、百度地图API等）来显示地图，并将地图中心设置为当前位置的经纬度。
- 在地图上添加一个标记，表示当前位置。
下面是一个示例代码，使用腾讯地图API来实现在获取当前位置后自动居中显示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自动居中显示当前位置</title>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_MAP_API_KEY"></script>
<script>
// 获取当前位置的经纬度信息
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// 创建地图实例
var map = new qq.maps.Map(document.getElementById("map"), {
center: new qq.maps.LatLng(latitude, longitude),
zoom: 15
});
// 在地图上添加一个标记，表示当前位置
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(latitude, longitude),
map: map
});
});
</script>
</body>
</html>上述代码中，需要替换YOUR_MAP_API_KEY为你自己的腾讯地图API密钥。通过调用Geolocation API的getCurrentPosition方法获取当前位置的经纬度信息，并使用腾讯地图API创建地图实例并设置地图中心为当前位置的经纬度。然后，在地图上添加一个标记，表示当前位置。
推荐的腾讯云相关产品：腾讯位置服务（https://cloud.tencent.com/product/tianditu）提供了丰富的地图API和定位服务，可用于实现地图显示和位置获取等功能。
相关·内容
3回答
我刚刚更新到Chrome64，并开始注意到我们的webapp应用程序中的这条消息：
[Violation] Only request geolocation information in response to a user gesture.
这似乎限制太多了。当我在谷歌地图中导航时，我不需要重复点击“更新位置”。位置轮询的替代方案是什么？
我们目前使用的代码如下：
let locInt = self.setInterval(function(){
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOpt
浏览 0提问于2017-12-01得票数 19
回答已采纳
我在ionic应用程序中使用过$cordovaGeolocation.getCurrentPosition。它能在安卓和网络上正常工作，并能正确获取位置。但在xcode模拟器中，它不能工作，也不能获取经度和纬度。并且不能获取经度和纬度。
var posOptions = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 0
};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
$scope.Lat =
浏览 1提问于2017-03-25得票数 2
下面是我用来查找用户位置的代码。
if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(pos) {
me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
infoWindow.setPosition(me);
infoWindow.setContent('Location found.');
},
functio
浏览 0提问于2016-04-13得票数 0
我创建了一个函数，一旦定位到地图上就会显示一个标记，并且显示不会自动居中。我的记号笔自动居中的参数是什么？我认为这个问题出现在getCenter上。 import { useState} from 'react';
import { useMap } from "react-leaflet";
import L from "leaflet";
import icon from "./iconPosition";
export default function LocationMarker() {
const map
浏览 12提问于2021-03-24得票数 0
回答已采纳
1回答
当我在页面加载后调用它时：
navigator.geolocation.getCurrentPosition(success, error, options)引发错误：违规仅响应用户手势请求地理位置信息。
我在Mac上使用Chrome v65。当页面加载时，我需要共享用户的位置。这是为那些已经同意分享他们的位置的用户。
如果我在Chrome的网络控制台中模拟位置，它可以通过getCurrentPosition或监视位置可靠地获取位置。我注意到不同的wifi连接也能更可靠地提供这些信息。有人能在这方面增加一些见解吗？
浏览 0提问于2018-04-25得票数 0
因此，我必须在我的页面中添加一个“中心”按钮，当单击该按钮时，地图将使用setCenter方法在引脚上居中。然而，在我点击我的按钮后，地图变成空白而不是显示中心。
这是我的代码。
如何解决这个问题？提前谢谢你！
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function init() {
var addButton = document.getElementById("setcenter");
浏览 0提问于2014-02-05得票数 2
回答已采纳
9回答
到目前为止，我刚刚开始进入HTML5，并对其进行了地理位置测试。我遇到了一点障碍though...when当我试图获取我的地理位置时，chrome会自动阻止页面获取我的位置。其他站点不会发生这种情况，例如下面的站点： http://html5demos.com/geo 我正在使用的脚本： function get_location() {
if (geo_position_js.init()) {
geo_position_js.getCurrentPosition(show_map, handle_error);
}
}
浏览 143提问于2011-03-25得票数 69
回答已采纳
我有以下函数，它有两个值:纬度和经度：
getgps(latitude , longitude);
我需要从地理定位函数中获取数据：
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
}
function showPosition(position) {
var x = position.coords.latitude;
var y = position
浏览 2提问于2017-06-06得票数 0
回答已采纳
如果这个问题已经被回答了，我很抱歉--我已经在StackOverflow和其他地方找了几个小时了，但还是想不通。
我正在尝试谷歌地图的V3地理定位功能()，想在地图居中后添加一个简单的中心标记(以及其他东西)。
如果我在"initialize“函数的末尾添加以下内容，它似乎无法访问"initialLocation”变量：
var marker = new google.maps.Marker({
position: initialLocation,
map: map
});
但是，如果我在
浏览 2提问于2011-03-20得票数 0
回答已采纳
看看这个：
function doGeolocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(positionSuccess, positionError);
if(//here i need check)
{
Save();
}
}
else
{
positionError(-1);
}
}
因此，在内部的' if‘中，我想检查nav
浏览 4提问于2012-07-07得票数 0
回答已采纳
我目前正在开发一个webOS TV网络应用程序，并希望使用地理位置应用程序接口获得用户的地理位置。浏览器引擎已经实现了应用程序接口，但是当我在webOS TV 4.0.0模拟器上运行我的web应用程序时，getCurrentPosition方法会立即执行错误回调，而不会询问用户是否允许知道他们的位置。 下面是我正在运行的简单代码片段： function success(pos) {
console.log('Position: ', pos);
}
function error(err) {
console.log('Err', err)
}
if
浏览 20提问于2019-03-02得票数 2
2回答
我有一个OS X应用程序，两个按钮紧挨着。按钮的居中位置很好。
但是当我调整窗口大小时，按钮仍然停留在相同的位置。
如何对齐按钮，使它们在调整窗口大小时始终居中？
浏览 0提问于2013-03-21得票数 2
2回答
我已经看过其他一些答案，但无法让它们适用于我的特定情况。我已经简化并包含了下面的整个代码块。基本上，它只在蓝色框中显示文本。我想知道如何使盒子居中。
<!DOCTYPE html>
<html>
<head>
<style type="text/css"><!--
#content {
width:500px;
padding: 10px 10px 10px;
background-color: #D1ECFF;
position: relative;
border-radius: 10px;
-webki
浏览 1提问于2012-01-22得票数 0
如何在此代码中设置缩放级别
$(function() {
$('#map_canvas').gmap({ 'disableDefaultUI':true, 'callback': function() {
var self = this;
$.getJSON( 'location1.php', function(data) {
conso
浏览 2提问于2013-09-14得票数 0
我有代码：
var watchID;
var geoLoc;
var geoService = navigator.geolocation;
if (geoService) {
geoService.getCurrentPosition(showCurrentLocation,errorHandler,{enableHighAccuracy: true});
} else {
alert("Your Browser does not support GeoLocation.
浏览 0提问于2012-09-10得票数 0
2回答
我试着提醒我的纬度和经度，但它不起作用。我创建了一个全局变量，并在函数中更改了这个变量。我的其他函数没有看到这个全局变量。我不知道，是什么错误。
var latitdue;
var longitude;
navigator.geolocation.getCurrentPosition(
function coords(position) {
longitude = position.coords.longitude;
latitude = position.coords.latitude;
}, function (error) {
ale
浏览 4提问于2014-04-21得票数 0
1回答
当第一次尝试在iPhone上获取地理位置时，我拒绝了。每隔一次我想要获取位置(在页面再次重新加载之前)，我没有得到任何响应(没有错误也没有成功)：
navigator.geolocation.getCurrentPosition(
function (location) {
ig_location.lat = location.coords.latitude;
ig_location.lng = location.coords.longitude;
alert('got it!');
},
function
浏览 1提问于2010-03-19得票数 1
回答已采纳
我正在尝试利用地理定位来获取我当前位置的纬度和经度。直到最近，非常类似的代码才开始工作，我不知道为什么它停止工作。它不再设置纬度或经度变量。当我遍历js代码时，getCurrentPosition()方法将被跳过，我不知道为什么。奇怪的是，如果我在getCurrentPosition()方法中放置一个警告框，它将正确地获取和显示纬度和经度.我不知道为什么会这样。
var gl;
try {
if (typeof navigator.geolocation === 'undefined'){
gl = google.gears.factory.create
浏览 2提问于2012-06-18得票数 0
回答已采纳
3回答
我一直在尝试运行这段代码来获取纬度和经度。我的IE浏览器显示不支持地理定位服务的消息，即使我在Chrome中设置了允许所有网站跟踪的位置设置，chrome也显示“此页面已被阻止跟踪您的位置”。请帮帮忙。
<html>
<head></head>
<body>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();"/>
<script>
fun
浏览 3提问于2014-10-08得票数 1
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successLocation, errorCallback, {timeout: 5000, enableHighAccuracy: false});
} else {
errorCallback();
}
function successLocation() {
console.log('success');
}
function errorCallback() {
console.log('e
浏览 0提问于2018-11-01得票数 0
回答已采纳
2回答
当前位置错误
、、、
下面的代码显示了我错误的当前位置，请告诉我这段代码的错误之处
<script type="text/javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var coords = new google.maps.LatL
浏览 0提问于2013-07-27得票数 0
2回答
地理位置帮助
、、
嗨，有人能告诉我我到底做错了什么吗?我似乎既不能成功也不能失败函数运行。
function init(){;
// Get the current location
getPosition();
}
function getPosition(){
navigator.geolocation.getCurrentPosition(success, fail);
}
function success(position)
{
alert("Your latitude: " + position.coords.latitu
浏览 5提问于2010-08-15得票数 1
我有以下Javascript，我在其中修改了标准Google Maps API initialize()函数和标准addMarker函数。地图可以正常加载和居中，但标记不会添加到地图中。我查看了，但我不确定我做错了什么。
<script type="text/javascript">
// Note that using Google Gears requires loading the Javascript
// at http://code.google.com/apis/gears/gears_init.js
var siberia = new google
浏览 0提问于2011-11-30得票数 0
回答已采纳
我想知道是否有可能阻止WKWebView显示位置许可提示？("website.com“希望使用您当前的位置)我认为它显示是因为该网站包含谷歌地图。我不感兴趣的预压一个位置的位置，就像在其他这样的问题显示。我只是不想在WKWebView中使用位置。是否有方法阻止位置权限提示出现？我尝试过注入以下javascript，但它不起作用。
let contentController = WKUserContentController()
let scriptSource = "navigator.geolocation.getCurrentPositio
浏览 2提问于2018-07-29得票数 4
回答已采纳
1回答
我正在使用AngularJs和Ionic进行混合移动应用程序开发。我正在从API获取这些数据
[{"Location":"Brierfield"},
{"Location":"Centreville"},
{"Location":"Chelsea"},
{"Location":"Coosa Pines"},
{"Location":"Clanton"}]
在下面代码的帮助下，我得到了我的当前位置
var position = {
浏览 0提问于2016-02-05得票数 2
我似乎不能让navigator.getLocation()在Firefox65或Safari10上工作 function getLocation(user_radius) {
var geo_options = {
enableHighAccuracy: true,
maximumAge : 30000,
timeout : 27000
};
function error(err) {
console.warn('Cannot load user location. Make sure you gave permission to share
浏览 55提问于2019-03-07得票数 1
顺便说一句-在IOS上，事情按照预期工作。我遇到的问题是在Android上运行(Nexus 5 API 30)
我特别注意了和“android/ gradle.properties /build.gradle”的设置，AndroidManifest.xml也更新了，加入了
uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION
uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION
当应用程序启
浏览 3提问于2020-11-23得票数 0
1回答
你好，我正在使用下面的java脚本来获取位置权限，当我们在桌面浏览器和安卓设备上打开它时，这个脚本工作得很好，但是弹出在iOS设备上不起作用。
(function () {
function updatePermission(name, state) {
console.log('update permission for ' + name + ' with ' + state);
}
function init() {
va
浏览 0提问于2018-05-15得票数 5
我在将ST_DISTANCE中的变量设置为变量而不是数字时遇到了问题。我的目标是根据到客户端的距离对融合表项进行排序，并且只显示最近的3个。
(另外，我希望窗口缩小并包含这些点，以及指向客户端所在的位置。任何指向某些资源的提示或链接都将不胜感激)。
以下是Google地图、Fusion表和地理位置代码：
<script type="text/javascript">
(function() {
if(!!navigator.geolocation) {
var map;
var mapOptions = {
浏览 0提问于2013-04-24得票数 0
回答已采纳
1回答
我是一个彻头彻尾的JS Newb，并试图构建我的简单JS代码。目标是获取用户的位置。
它可以工作，但getUserCoordinates函数不返回值？我认为这只是一个初学者的逻辑失败？
var app = {
geocoder: null,
init: function() {
this.geocoder = new google.maps.Geocoder();
coordinates = this.getUserCoordinates();
console.log(coordinates); // empty??
return;
},
getUserC
浏览 4提问于2012-10-09得票数 0
回答已采纳
所以我正在尝试让geoLocation在安卓系统上运行。我已经使用了下面的代码，我不得不说它在浏览器中工作得很好，但是当我在设备上运行它时，它就不能工作了。这是我的代码：
Index.html
<p id="lat">Stad :</p>
<p id="lng">Straat :</p>
<script>
window.onload = function(){
document.addEventListener("deviceready", init, fals
浏览 0提问于2016-03-22得票数 0
我有点担心这个代码示例在中的安全性
// Forcing the user agent to return a fresh cached position.
// Request a position. We only accept cached positions whose age is not
// greater than 10 minutes. If the user agent does not have a fresh
// enough cached position object, it will immediately invoke the error
// callba
浏览 0提问于2011-11-23得票数 3
回答已采纳
我在我的应用程序中添加了地理定位插件，并使用此代码在phonegap中获取当前位置。但是这段代码不起作用。
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("4");
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position) {
alert("1&#
浏览 0提问于2014-07-29得票数 3
回答已采纳
对于我的chrome扩展，我试图显示用户的位置。我的js代码如下
document.addEventListener("DOMContentLoaded",function(loc){
var x = document.getElementById(demo);
getLocation();
});
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} els
浏览 3提问于2017-08-17得票数 0
以下是我的javascript代码：
function getLocation() {
//navigator.geolocation.getCurrentPosition(getCoor, errorCoor, {maximumAge:60000, timeout:30000, enableHighAccuracy:true});
var mobile =jQuery.browser.mobile;
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.m
浏览 0提问于2016-10-26得票数 4
回答已采纳
我尝试用下面的代码在UITableViewCell中居中宽度方向的UIImageView：
// self.cover_image is a UIImage variable
// cell is a UITableCellView
UIImageView* backcover_imageview = [[[UIImageView alloc] initWithImage:self.cover_image] autorelease];
[backcover_imageview sizeToFit];
//cen
浏览 0提问于2011-06-17得票数 7
回答已采纳
1回答
我希望将纬度和经度保存到php变量中，例如，我想要这样的输出：
<?php echo $latitude ?>
下面是捕获位置的脚本(来自w3schools)
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigato
浏览 1提问于2015-06-03得票数 0
回答已采纳
1回答
我正在使用
他们工作到目前为止，我想达到这一点，当有人搜索和选择他们的区域一个标记出现，然后他们可以拖到他们需要的位置。
到目前为止，我已经通过编辑GoogleMap.vue文件使标记可拖动。
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:draggable="true"
@click="center=m.position"
@drag="
浏览 2提问于2018-08-21得票数 1
回答已采纳
我试图在地图中显示所有用户的地理位置。通过google文档，我有了一种方法来显示我作为用户的位置。但是，我是如何从网站上的注册人员那里展示所有地理位置的呢？
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
浏览 2提问于2017-10-17得票数 0
回答已采纳
我有C++和Java背景。我在理解JavaScript中的函数调用时遇到了一些问题。
下面是我的代码示例，我声明了变量lon和lat #4，并在第5行和第6行为其赋值。
这是我的问题，我在#1调用了writeToTes()，它起作用了。但是当我将writeToTes()放在#2或#3上时，lon和lat是空的，就像它从未被赋值一样。为什么会这样呢？
根据我逻辑，我们已经执行了if(navigator.geolocation){}，lat和lon应该已经赋值，为什么当我调用writeToTes() lon时，lon仍然是空的。
var lon = '',
lat = &#
浏览 3提问于2017-02-28得票数 0
回答已采纳
我正在使用Intel XDK开发一个应用程序，我专门用android (Nexus6P)进行测试。
我已经为Cordova添加了Cordova地理定位插件和Google位置服务，并在我的位置服务打开后进行了测试，它正确地获得了这两个插件的位置。
但是，当我关闭位置服务时，什么都不会出现。
下面是我当前用于获取位置的代码：
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var Geo={};
if (navigator.geo
浏览 3提问于2016-01-16得票数 0
回答已采纳
我有一些问题
我想得到我现在的职位，然后做点什么。我像这样使用navigator.geolocation.getCurrentPosition函数：
$(document).ready(function(){
var current_location;
navigator.geolocation.getCurrentPosition(function(position) {
current_location = position;
});
// do something with current_location
});
但我不能将位置赋值
浏览 2提问于2011-11-15得票数 0
我正在使用谷歌地图和地理定位api来尝试显示一个以他们的位置为中心的地图，并在那里有一个标记，但是地图没有显示。我最初让它显示，但是一旦我添加了getCurrentPosition函数，它就不再显示了。我遗漏了什么?我如何修复它？
var map,latitude,longitude;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(updateCoords);
}
else {
alert("geolocation not supported by this
浏览 0提问于2018-05-01得票数 0
function onPositionUpdate(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var markerPoint = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: markerPoint,
map: map,
title: 'Your Locatio
浏览 0提问于2012-04-19得票数 0
回答已采纳
我正在尝试使用js的作用域从navigator.geolocation.getCurrentPosition中提取一个变量
var lat;
function callback (position) {
lat = position.coords.latitude;
}
navigator.geolocation.getCurrentPosition(callback,fail,{timeout:10000});
// after getCurrentPosition succeeds
alert(lat); // this alerts null
由于作用域的原因，上面的代码不能将p
浏览 0提问于2012-03-30得票数 6
回答已采纳
嘿，我正在尝试添加覆盖标记，即使我们滚动或缩放屏幕，它仍然停留在屏幕的中心位置。
我试着从它的初始位置移动标记，但当我们快速移动屏幕时，它就落后了。所以我想在屏幕中央设置标记图像。
下面是我为移动标记所做的代码：
componentDidMount: function() {
this.fetchData();
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
region: {
latitud
浏览 1提问于2016-07-21得票数 5
1回答
我使用了geolocation API来返回用户的坐标。我想返回这些坐标的地址，而不是返回纬度和经度。我有没有办法做到这一点？我使用Rails作为后端，所以考虑使用地理编码器gem，但使用JS可能更有意义，并将所有地理编码逻辑放在一个地方。目前我有以下代码。 var currentLocation = document.getElementById('coordinatesStore');
document.querySelector('.add-button').addEventListener('click', () => {
i
浏览 20提问于2019-05-12得票数 0
我一直在编写一些地图功能。在过去的几天里，我一直被限制对我的浏览器navigator.geolocation.getCurrentPosition进行调用。我不知道为什么，但当我运行以下代码时：
navigator.geolocation.getCurrentPosition(
function(){
console.log("success",arguments);
},function(){
console.log("fail",arguments);
}
);
浏览 0提问于2012-02-15得票数 1
回答已采纳
2回答
我使用jquery，下面的代码行只对Firefox和Blackbarry浏览器有问题
职位：
navigator.geolocation.getCurrentPosition(currentPosition);
function currentPosition(res){
window.res = res;
}
代码：
var postion = window.res;
$.ajax({
url: 'SendLocation',
type: 'post',
浏览 0提问于2013-05-12得票数 0
回答已采纳
以下代码可以在Firefox中运行，但不能在Google Chrome中运行：
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script type="text/javascript">
var successCallback = function(data) {
console.log('latitude: ' + data.coords
浏览 1提问于2011-05-31得票数 18
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
