uniapp+google map不显示

已于 2024-09-20 10:27:27 修改
阅读量328 收藏
点赞数
分类专栏： 前端 文章标签： uni-app google map
于 2024-09-20 10:07:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/renkai721/article/details/142376787
版权

背景需求

需要在uniapp中接入google地图，研究了一番，都没有找到合适的，现在说一下教程。

效果图

前期工作

这两点缺一不可，否则你啥也看不到。

1、电脑安装L-O-U梯

用于访问G-OO-G-LE的API或者创建google map key。

2、手机安装L-O-U梯

用于显示google地图。我就是手机上没安装，以为电脑安装了就可以代理，谁知道花了一下午时间，最后才突然想起来，手机也需要安装。

开发教程

1、配置文件

 

2、index.vue


                

        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        


    



                



	

		

			

				
					
uniapp+renderJS+google map开发安卓版APP非小程序

				
			

			

				

					renkai721的专栏
				

				

					09-20
					
					520
					
				

			

		

		

			
				
uniapp+renderJS+google map开发安卓版APP非小程序,google map小叉号不显示，google map自定义marker右上角的小叉号如何去掉,uniapp+google map不显示

			
		

	



                

            
              



	

		

			

				
					
uniapp [全端兼容] - 详细实现引入使用 Google 谷歌地图显示及搜索城市地点，提供地图标点、地址搜索、定位导航、中文显示及汉化、地图打位置标点显示、搜索框搜索功能、省市区详细经纬度数据等

					
热门推荐

				
			

			

				

					王二红
				

				

					07-04
					
					1万+
					
				

			

		

		

			
				
uniapp，h5移动端网页，微信小程序，Android，苹果ios，app，nvue，谷歌地图，官方，谷歌官方文档，googlemap，申请key，uniApp谷歌地图，详细使用教程，无法访问，集成谷歌地图，app引入谷歌地图，选点定位，地图导航，位置搜索，城市搜索，文字地点模糊查询，地点省市区详细数据，经纬度信息，markers地图标记点，一直报错怎么办，接入google地图不显示报错，谷歌地图插件，vue3，vue2，组件，Key申请流程，谷歌key怎么申请，api文档，网站打不开，用什么插件，在u

			
		

	



              


  
              

                


	

		

			

				
					
UNIAPP nvue 地图 markers  不显示

				
			

			

				

					weixin_42704663的博客
				

				

					11-03
					
					4701
					
				

			

		

		

			
				
小程序转uniapp，地图页面改为nvue页面。业务为请求回来的定位，要替代原来的定位 ，按照下程序的代码走不通。不显示图片


let mark = {
   iconPath: "/static/common/images/current_location@3x.png",
   id: 1001,
   latitude: wgs84togcj02[1],
   longitude: wgs84togcj02[0],
   width: 50,
   height: 50
};
let markers

			
		

	





	

		

			

				
					
要引入Google地图了

				
			

			

				

					说 自己听
				

				

					10-25
					
					526
					
				

			

		

		

			
				
就贴一张图吧

			
		

	



		

			
		



	

		

			

				
					
uniapp地图（map）功能研发

				
			

			

				

					ds0604的博客
				

				

					09-24
					
					1822
					
				

			

		

		

			
				
一、底层依赖地图
1、h5和微信小程序基于腾讯地图
2、app、支付宝小程序基于高德地图
3、百度小程序、快应用基于百度地图
备注：原生的map组件就是基于腾讯地图所以无需引用，其他地图是需要下载sdk文件以及申请key来支持应用的。
二、基础写法
<template>
	<view>
		<map style="width: 100%; height: 700px;" :latitude="latitude" 
		:longitude="longitude" :marker

			
		

	





	

		

			

				
					
uniapp开发app使用谷歌地图(ios跟安卓)

				
			

			

				

					阿晨的博客
				

				

					04-03
					
					4412
					
				

			

		

		

			
				
uniapp开发app使用谷歌地图(ios跟安卓)

			
		

	





	

		

			

				
					
uniapp使用webview调用谷歌地图（小程序+app端）

					
最新发布

				
			

			

				

					cgn1705050221的博客
				

				

					02-22
					
					1861
					
				

			

		

		

			
				
uniapp调用谷歌地图，适用小程序和app端；具体功能可以搜索地址，选中地址返回。

			
		

	





	

		

			

				
					
h5项目使用谷歌地图(uniapp)

				
			

			

				

					qq_73720914的博客
				

				

					07-10
					
					1516
					
				

			

		

		

			
				
在项目的文件中配置 找到H5的配置信息 里面添加maps配置 地图模块只能添加一个。

			
		

	





	

		

			

				
					
uniapp app引入谷歌地图

				
			

			

				

					qq_43024468的博客
				

				

					01-18
					
					5135
					
				

			

		

		

			
				
uniapp app引入谷歌地图, 多点标记

			
		

	





	

		

			

				
					
分享uniapp移动端和h5项目如何使用谷歌地图

				
			

			

				

					qq_51185865的博客
				

				

					01-13
					
					3064
					
				

			

		

		

			
				
基于uniapp + vue2 的APP端项目使用谷歌地图的注意点。

			
		

	





	

		

			

				
					
google地图应用示例源码

				
			

			

				

					04-08
				

			

		

		

			
				
1、选点获取经纬度
2、加载marker点
3、设置不同marker点图标
4、marker点移动
5、提供相应的事件接口和marker点JSon数据结构

			
		

	





	

		

			

				
					
uniapp H5端使用 google 地图 @googlemaps/js-api-loader，文字地点模糊查询，地点省市区详细数据，经纬度信息，markers地图标记点

				
			

			

				

					weixin_43877778的博客
				

				

					09-19
					
					4737
					
				

			

		

		

			
				
uniapp H5端使用 google 地图 @googlemaps/js-api-loader，文字地点模糊查询，地点省市区详细数据，经纬度信息，markers地图标记点

			
		

	





	

		

			

				
					
uni-app web-view导入地图

				
			

			

				

					m0_60910195的博客
				

				

					08-27
					
					1494
					
				

			

		

		

			
				
记录下webview中调用谷歌地图的方法：

uni-app的官方说法是:



这边使用第1种方法，就不用插件了。注：调用谷歌地图，首先需要翻墙

1，首先申请谷歌帐号，这里申请步骤就不赘述了。

2，其次申请谷歌秘钥：

平台地址：https://developers.google.cn/maps/gmp-get-started

选择Maps JavaScript API：https://console.cloud.google.com/google/maps-apis/new?project=fl.

			
		

	





	

		

			

				
					
uniapp的H5使用地图注意点、地图key申请

				
			

			

				

					m0_60312580的博客
				

				

					08-02
					
					2962
					
				

			

		

		

			
				
在H5 端使用地图和定位相关，需要在 manifest.json 内配置腾讯或谷歌等三方地图服务商申请的秘钥（key），高德地图需要额外配置 securityJsCode 或 serviceHost。配置了地图的key才能在H5中正常使用地图，否则会报 Map key is not configures。最近用uniapp开发H5有用到了地图，记录下使用地图需要注意的点。腾讯一个账号是可以申请5个key，每天免费的量也有限制。3、在控制台的左侧找到“应用管理”——“我的应用”

			
		

	





	

		

			

				
					
mac uniapp谷歌跨域

				
			

			

				

					JessicaLi的博客
				

				

					03-18
					
					213
					
				

			

		

		

			
				
uni H5在Chrome有时候请求不到数据，如果确认是跨域问题。注意：youmacname是你的mac名称，你的用户名就OK。

			
		

	





	

		

			

				
					
uni-app打包后安卓不显示地图及相关操作详解

				
			

			

				

					会飞的猪0629
				

				

					08-22
					
					3404
					
				

			

		

		

			
				
uni-app在浏览器调试map地图正常，但是打包后安卓端不显示的问题解决

			
		

	





	

		

			

				
					
uniapp使用地图时renderjs的写法

				
			

			

				

					eight_eyes_fish的博客
				

				

					12-18
					
					452
					
				

			

		

		

			
				
我们可以把script看成父级，把看成子级。this.$ownerInstance.callMethod('父级方法', 要穿给父级的数据)父传子时，在template里面写一个view用来监听父级数据的变化，以来调用子级方法。

			
		

	





	

		

			

				
					
【subNVue】uni-app手机调试无法显示地图Map之外组件的问题及解决

				
			

			

				

					xhltk316的博客
				

				

					07-06
					
					3509
					
				

			

		

		

			
				
参照官网在<map>标签里嵌套使用<cover-view>，在浏览器调试可以正常使用，但是在手机APP调试时无法正常显示，一顿百度之后找到原因是vue页面的地图会默认置位最顶层，甚至连导航栏都会覆盖掉，而<cover-view>只适用于小程序且修改z-index也不管用。

			
		

	





	

		

			

				
					
【UniApp踩坑记录】在subNvue页面中使用Map，添加marker后不显示

				
			

			

				

					Alan_Walker688的博客
				

				

					05-11
					
					2558
					
				

			

		

		

			
				
uniapp subNvue页面中使用 map 后发现 marker 不显示的问题及解决

			
		

	





	

		

			

				
					
uniapp 地图组件map选点

				
			

			

				

					01-07
				

			

		

		

			
				
### 实现 UniApp 地图组件中的选点功能

在 UniApp 中实现地图选点功能主要依赖于腾讯地图 API 和相关插件的支持。通过集成这些工具，可以方便地实现在地图上选取特定地点的功能。

#### 准备工作

为了能够顺利使用腾讯地图的服务，在项目开始前需完成必要的准备工作：

- 注册并登录腾讯云账号，创建应用并获取相应的 key[^2]。
- 安装所需的地图 SDK 或者加载器来引入地图服务。对于非 Google Maps 的其他服务商（如本案例中的腾讯），则不需要安装 `@googlemaps/js-api-loader` 这样的专用包[^3]。

#### 创建页面结构

定义一个简单的页面布局用于展示地图以及处理用户的交互操作：

```html
<template>
  <view class="container">
    <!-- 显示地图 -->
    <map id="myMap" :longitude="center.longitude" :latitude="center.latitude"></map>

    <!-- 用户点击按钮触发选点事件 -->
    <button type="primary" @click="chooseLocation">选择位置</button>
    
    <!-- 输出所选地址信息 -->
    <text v-if="selectedAddress">{{ selectedAddress }}</text>
  </view>
</template>
```

#### 编写 JavaScript 逻辑

接下来编写 Vue.js 方法以响应用户行为，并与腾讯地图 API 进行通信：

```javascript
<script>
export default {
  data() {
    return {
      center: { longitude: 0, latitude: 0 }, // 初始中心坐标
      selectedAddress: ''                   // 所选地址描述
    }
  },
  
  onLoad(options) {
    this.initMap();
  },

  methods: {
    async initMap() {
      const res = await new Promise((resolve, reject) => {
        qqmapsdk.reverseGeocoder({
          success(res){
            resolve(res);
          },
          fail(err){
            console.error('初始化失败', err);
            reject(err);
          }
        });
      });

      let location = res.result.location;
      Object.assign(this.center, location);      
    },

    chooseLocation() {
      uni.chooseLocation({
        success: (res) => {
          this.selectedAddress = `${res.name}(${res.address})`;
          this.center = { ...this.center, ...res };
        },
        fail: () => {
          console.log('取消选择');
        }
      })
    }
  }
}
</script>
```

此代码片段展示了如何利用 `qqmapsdk` 对象来进行逆地理编码查询从而设置初始视图的位置；同时也包含了当用户按下“选择位置”按钮时调用的函数 `chooseLocation()` ，该函数会弹出原生的选择界面让用户挑选具体的地方，并更新界面上的相关数据[^1]。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
renkai721

			
谢谢您的打赏！

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值