uni-app H5中使用谷歌地图时uni.chooseLocation与map组件存在冲突无法正常使用

uni-app H5中使用谷歌地图时uni.chooseLocation与map组件存在冲突无法正常使用

开发环境 版本号 项目创建方式
Windows Windows 10 专业版 22H2 HBuilderX

示例代码：

<map :markers="covers" :longitude="longitude" :latitude="latitude" :circles="circles" :scale="scale" />

如果页面之前加载过map组件，再去使用uni.chooseLocation，此api将出现问题
打开地图页面可以正常展示，但是下面的相关地点会一直转圈圈

操作步骤：

  1. 在当前页面使用map组件展示地图
  2. 然后再做一个按钮添加点击事件使用uni.chooseLocation

预期结果：

uni.chooseLocation可以打开地图并选择位置

实际结果：

uni.chooseLocation仅打开地图不能选择位置

bug描述：

很简单的说明
只要经过使用map组件的页面，再去使用uni.chooseLocation
那么这个api打开地图选择位置的时候，地图下面的相关地点会一直加载中
实测把map组件代码去了，就能恢复正常，相关地点秒加载显示出来


更多关于uni-app H5中使用谷歌地图时uni.chooseLocation与map组件存在冲突无法正常使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

只有使用谷歌地图的时候会出现这种问题，腾讯地图没事

更多关于uni-app H5中使用谷歌地图时uni.chooseLocation与map组件存在冲突无法正常使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app的H5平台中使用谷歌地图时，如果遇到uni.chooseLocation与map组件存在冲突导致无法正常使用的问题，可以尝试以下方式来解决。由于uni-app在H5平台上的实现依赖于Web技术，而谷歌地图也是通过JavaScript API加载的，因此我们需要确保这两个组件不会相互干扰。

以下是一个基本的代码示例，展示了如何在H5中集成谷歌地图，并尝试处理可能的冲突。

1. 引入谷歌地图API

首先，在H5页面的<head>标签中引入谷歌地图API：

<head>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</head>

2. 初始化地图

在页面上添加一个<div>用于显示地图，并在JavaScript中初始化地图：

<template>
  <view>
    <div id="map" style="width: 100%; height: 400px;"></div>
  </view>
</template>

<script>
export default {
  mounted() {
    window.initMap = () => {
      const map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
      });
    };
  },
};
</script>

3. 使用uni.chooseLocation

由于uni.chooseLocation在H5上可能无法直接显示谷歌地图的界面，你可以考虑使用其他方式获取用户位置，比如使用HTML5的Geolocation API。以下是一个示例：

methods: {
  chooseLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const { latitude, longitude } = position.coords;
          // 处理获取到的位置信息
          console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
          // 更新地图中心
          if (window.map) {
            window.map.setCenter({ lat: latitude, lng: longitude });
          }
        },
        (error) => {
          console.error('Error getting location', error);
        }
      );
    } else {
      console.error('Geolocation is not supported by this browser.');
    }
  },
}

4. 调用选择位置的方法

你可以在页面的某个按钮点击事件中调用chooseLocation方法：

<template>
  <view>
    <button @click="chooseLocation">Choose Location</button>
    <div id="map" style="width: 100%; height: 400px;"></div>
  </view>
</template>

这种方式避免了直接使用uni.chooseLocation，而是通过HTML5的Geolocation API获取用户位置，并在谷歌地图上显示。这样可以减少组件间的冲突，并确保在H5平台上功能的正常运行。

回到顶部