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

最近用vue开发后台系统时，有些数据需要在地图上标注出来，需要用到地图功能，因为是国际项目，国内的地图不太适用，所以选用了google地图，谷歌地图api： 。

一、必须的开发要求

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
<div id="allmap" ref="allmap"></div>
  //创建谷歌地图
   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 =
    '<div class="content"><h3>地图</h3><p>测试数据</p></div>';
   //地图的消息窗口：infowindow
   let infowindow = new google.maps.infowindow({
    content: contentstring
   });
   // 点击标点事件
   marker.addlistener("click", function() {
    infowindow.open(this.maps, marker);
   });

示例图片：

2.结合项目

//mappage.vue
<template>
 <div class="container">
  <div id="allmap" ref="allmap"></div>
 </div>
</template>
<script>
export default {
  mounted(){
  //在mounted中执行地图方法，mapdata为要展示的数据
  this.initmap(mapdata);
}
  methods:{
  initmap(mapdata) {
   let that = this;
   // 创建google地图
    this.maps = new google.maps.map(document.getelementbyid("allmap"), {
    zoom: 13,
    //地图中心点，这里我以第一个数据的经纬度来设置中心点
    center: { lat: mapdata[0].latitude, lng: mapdata[0].longitude },
    disabledefaultui: false,
    zoomcontrol: false   
   });  
   // 设置满足条件的自定义标记图标
   let imageblue = "@/img/map_blue.png";
   let imagered = "@/img/map_red.png";
   let imagegray = "@/img/map_gray.png";
   let infowindow = new google.maps.infowindow();
   // 循环渲染数据
   mapdata.map(currdata=>{
    // 判断当前图片
    let currimg = "";
    if (currdata.line == 0) {
     currimg = imagegray;
    } else {
     if (currdata.available >= 4) {
      currimg = imageblue;
     } else {
      currimg = imagered;
     }
    }
    let marker = new google.maps.marker({
     position: { lat: currdata.latitude, lng: currdata.longitude },
     map: this.maps,
     title: currdata.name,
     // 此处的icon为标记的自定义图标
     icon: currimg,
     animation: google.maps.animation.drop
    });
    
     //多个标记点的点击事件
    (function(marker, currdata) {
     google.maps.event.addlistener(marker, "click", function(e) {
      let currline =
       currdata.line == 1? '在线': '离线';
      //设置消息窗口的统一内容
      infowindow.setcontent(
       '<div class="content"><h3 style="margin-bottom:5px;font-size:20px;">' +
        currdata.name +
        '</h3><p style="margin-bottom:5px;font-size:16px;">' +
        currdata.address +
        '</p></h3><p style="display: flex;align-items:center;margin-bottom:5px;"><span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#4ecc77;"></span><span style="margin-left:5px;color:#4ecc77;">可用电池 ' +
        +currdata.available +
        '<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#ff485c;margin-left:25px;"></span><span style="margin-left:5px;color:#ff485c;">空仓 ' +
        +currdata.empty +
        '</span></p><p style="color:#333;margin-top:5px;">机柜状态：<span style="color:#000;">' +currline+
        '</span></p><p style="color:#333;margin-top:5px;">地理位置：<span style="color:#000;">lat：' +
        currdata.latitude +
        "；log：" +
        currdata.longitude +
        "</span></p></div>"
      );
      //调用 infowindow.open
      infowindow.open(this.maps, marker);
     });
    })(marker, currdata);
     }）
    }
  }
 }

示例图片：

以上使用的是谷歌地图的基本内容，有兴趣的小伙伴儿可以查看谷歌官方文档，查看更多内容，使用更多功能o(∩_∩)o。希望对大家的学习有所帮助，也希望大家多多支持。