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

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,
 },
})

//创建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,
   //标点的名称
     : \"中华人民共和国\",
   //标点中的文字
    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);
   });

//mapPAge.vue
<template>
 <div class=\"container\">
  <div id=\"allmap\" ref=\"allmap\"></div>
 </div>
</template>
< >
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,
      : 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);
     }）
    }
  }
 }