在vue里面使用高德地图api，页面上没写自动刷新，但是每分钟页面会自己刷新，取消高德地图的加载就没这个问题了，请问各位应该怎么解决这个问题呢？
这个问题可能是由于其他代码或配置引起的，而不是高德地图API本身的问题。以下是一些可能的解决方案：
检查页面中的其他代码：可能有其他代码或定时器在每分钟触发页面刷新。请检查页面中的其他代码，特别是与定时器相关的代码，看是否有任何可能导致页面刷新的逻辑。
检查浏览器插件或扩展：某些浏览器插件或扩展可能会自动刷新页面。请检查浏览器中已安装的插件或扩展，如果有类似功能的插件，请尝试禁用它们并重新加载页面。
检查服务器配置：如果您的应用程序是在服务器上运行的，可能是服务器配置导致页面刷新。请检查服务器配置文件，特别是与缓存或自动刷新相关的配置。
使用浏览器开发者工具进行调试：使用浏览器的开发者工具（如Chrome的开发者工具）进行调试，查看是否有任何错误或警告信息，以及页面刷新的原因。
如果上述解决方案都无法解决问题，建议您提供更多的代码和详细信息，以便我们能够更好地帮助您解决问题。
可能是你代码里有 变量 更新导致页面刷新。 你检查一下有没有定时器。 最好把代码截图看看
在utils里面新建getLocation.js 封装获取经纬度的公用方法(优化加载速度动态cdn引入高德地图) 由于高德Api方法获取当前经纬度比较慢，如果需求是在获取到当前经纬度数据之后请求一些数据，需要搭配promise使用保证获取到经纬度信息。具体见下面代码
function loadSDK() {
if (window.AMap) return
return new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src =
'http://webapi.amap.com/maps?v=1.4.6&key=*****************' //***为申请的高德key
document.head.appendChild(script)
script.onload = resolve
script.onerror = reject
})
}
export default async () => {
await loadSDK()
return new Promise((resolve) => {
// eslint-disable-next-line no-undef
AMap.plugin('AMap.Geolocation', () => {
// eslint-disable-next-line no-undef
const geolocation = new AMap.Geolocation({ enableHighAccuracy: false })
geolocation.getCurrentPosition((status, result) => {
const res =
status === 'complete'
? result.position
: { lat: 39.909187, lng: 116.397451 } //默认北京 116.397451、39.909187
console.log('定位结果', res)
resolve(res)
})
})
})
}
在vue页面中的使用（这里假设需求是请求离我最近店铺信息列表）
<template>
<div class="main-container">
<div class="list">
<div class="list-item" v-for="(item,index) in list" :key="index">
//you can do something
</div>
</div>
</div>
</template>
<script>
import * as Api from '@/api/xxx.js' //引入请求接口的Api
import getLocation from '@/utils/getLocation' //引入getLocation方法
export default {
data() {
return {
params: {},
list: []
}
},
mounted() {
this.fetchList()
},
methods: {
async getPosition() {
const { lng, lat } = await getLocation()
this.params = { lng, lat }
},
async fetchList() {
await this.getPosition()
const { list } = await Api.fetchList(this.params)
this.list = list
}
}
}
</script>
<style lang='less' scoped>
</style>
注意如果在index.html中引入高德地图在全局使用AMap构造函数需要在vue.config.js添加如下配置,否则会报‘AMap is not defined’错误
module.exports = {
configureWebpack: {
externals: {
AMap: 'AMap'
}
}
}
在页面中使用（举个🌰，代码未测试）
<script>
import AMap from 'AMap'
export default{
methods:{
fn(){
AMap.plugin('AMap.Geolocation', () => {
const geolocation = new AMap.Geolocation({ enableHighAccuracy: false })
geolocation.getCurrentPosition((status, result) => {
const res =
status === 'complete'
? result.position
: { lat: 39.909187, lng: 116.397451 } //默认北京 116.397451、39.909187
console.log('定位结果', res)
})
})
}
}
}
</script>