9赞

vue使用Google地图的实现示例代码

作者：勤奋的瞌睡猪_715 | 2023-01-27 15:56

这篇文章主要介绍了vue使用Google地图的实现示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

最近用Vue开发后台系统时，有些数据需要在地图上标注出来，需要用到地图功能，因为是国际项目，国内的地图不太适用，所以选用了Google地图，谷歌地图API： https://developers.google.cn/maps/documentation/javascript/tutorial 。

一、必须的开发要求

1.获取密钥API Key

首先，要使用Google Maps JavaScript API，必须获取一个可用的API密钥，并且必须启用结算，具体获取步骤可百度查询，在此就不一一叙述了，主要想讲的地图用法。

2.海外服务器IP

.想要使用谷歌地图就需要翻墙了，公司购买的是发条云的账号，在浏览器上下载发条云安装，安装好之后输入用户账号和密码进行登录，就可以选择服务器进行操作了。

海外模式的网速比较慢，一般开发谷歌地图的时候，我才打开。

二、引入谷歌插件

使用npm进行引入：

npm install vue-google-maps

//mian.js中：
import 'vue-googlemaps/dist/vue-googlemaps.css'
import VueGoogleMaps from 'vue-googlemaps'
Vue.use(VueGoogleMaps, {
 load: {
//填入申请的apiKey账号
  apiKey: '',
  libraries: ['places'],
  useBetaRenderer: false,
 },
})

三、使用谷歌插件

1.使用方法

//创建dom

  //创建谷歌地图
   this.maps = new google.maps.Map(document.getElementById("allmap"), {
    //显示一个滑动条来控制map的Zoom级别
    zoom: 13,
    //设置地图中心点
    center: { lat: mapData[0].latitude, lng: mapData[0].longitude },
    //为了关闭默认控件集,设置地图的disableDefaultUI的属性为true
    disableDefaultUI: true,
   // 通过单击缩放控件来缩放地图
    gestureHandling: 'cooperative',  
   // 删除地图上的“ 缩放”控件按钮。
    zoomControl: false,
   // 控制地图的类型 roadmap 地图 terrain 地图地形 
   satellite 卫星图像 hybrid 卫星图像+地名
    mapTypeId: 'satellite',      
    //语言可选值：en，zh_en, zh_cn
    language: zh_en  
  
   // 添加标记 (红色的标点)
   let marker = new google.maps.Marker({
    //标点的位置
    position: { lat: 22.5397965915, lng: 114.0611121534 },
    map: this.maps,
   //标点的名称
    title: "中华人民共和国",
   //标点中的文字
    label: "SZ",
   //标点的动画
    animation: google.maps.Animation.DROP
    });
    // 创建消息窗口DOM，将内容包装在HTML DIV中，以便设置InfoWindow的高度和宽度。
   let contentString =
    '地图
测试数据';
   //地图的消息窗口：InfoWindow
   let infowindow = new google.maps.InfoWindow({
    content: contentString
   });
   // 点击标点事件
   marker.addListener("click", function() {
    infowindow.open(this.maps, marker);
   });

示例图片：

2.结合项目

//mapPAge.vue






















    

    
        
            
            
                
                    
                
            

            
                勤奋的瞌睡猪_715            

            
                这个屌丝很懒，什么也没留下！            
            
            

                                
                    
                    关注作者
                            

        
    


    
        Tags | 热门标签
        
            
                                
                    actionscrip
                
                                
                    bash
                
                                
                    c#
                
                                
                    c++
                
                                
                    c语言
                
                                
                    erlang
                
                                
                    flutter
                
                                
                    go
                
                                
                    golang
                
                                
                    java
                
                                
                    javascript
                
                                
                    lua
                
                                
                    node.js
                
                                
                    perl
                
                                
                    php
                
                                
                    python
                
                                
                    scala
                
                                
                    typescript
                
                                
            
        
    


    
        RankList | 热门文章
        
            
                                
                    1Redux路由器 - 刷新后如何重播状态？
                
                                
                    2创建具有多个级别的摘要表
                
                                
                    3为什么空分配不起作用？
                
                                
                    4使用Swift进行单元测试:未执行封闭体
                
                                
                    5Apache NIFI"执行处理器"
                
                                
                    6无法访问Swift枚举值
                
                                
                    7模式匹配-Spark Scala RDD
                
                                
                    8在Google Cloud中设置网站？
                
                                
                    9如何设置整个工作簿的字体和大小而不是逐页？
                
                                
                    10Haskell没有使用'print'产生的实例
                
                                
                    11'NSInvalidArgumentException',原因:'***setObjectForKey:object不能为nil(key:device_uid)'
                
                                
                    12如果我正确使用频道,我是否需要使用互斥锁？
                
                                
                    13围绕UILabel的每个字边界
                
                                
                    14Android Fragment  -  getActivity().runOnUiThread在重启app时返回null
                
                                
                    15Matplotlib Colorbar科学记数法偏移
                
                                
                    16在哪个线程上执行Swift属性的didSet {}？
                
                                
                    17括号mozilla firefox开发者版的实时预览
                
                                
                    18如何在plottable.js中创建烛台图表
                
                                
                    19如何知道从主类调用方法的次数？
                
                                
                    20如何在nodejs中创建mysql模式

DevBox开发工具箱 | 专业的在线开发工具网站