vue中文版和国际版如何切换百度地图和谷歌地图

定义两个对象分别gisGoogle，gisBaidu用于导航之间的切换，代码只是记录一下自己的项目，整的有点乱，但是根据自己的项目需求可按照这样的思路去实现封装

//用于谷歌地图
var gisGoogle = {
  marker: null,
  markers: [],
  path: null,
  infoWindow: null,
   //初始化地图
  initMap(divId) {
    map = new google.maps.Map(document.getElementById(divId), {
      center: { lat: 22.545573, lng: 114.111295 },
      zoom: 10
    });
  },
  //添加多个描点
  addMarker(options) {
    if (options.id) {
      this.clearMarker(options.id);
    }
    var newxy = proj.wgsTomars([options.x,options.y])
    var uluru = { lat: newxy[1], lng: newxy[0] };
    var marker = new google.maps.Marker({
      position: uluru,
      map: map,
      icon: options.icon
    });
    marker.cid = options.id;
    this.markers.push(marker);
    if (this.infoWindow) {
      this.infoWindow.close();
      this.infoWindow = null;
    }
    if (options.popup) {
      marker.addListener('click', function (e) {
        if (this.infoWindow) {
          this.infoWindow.close();
          this.infoWindow = null;
        }
        this.infoWindow = new google.maps.InfoWindow({
          content: options.popup()
        });
        this.infoWindow.open(map, marker);
      }.bind(this));
    }
  },
  //清除描点
  clearMarker(id) {
    if (this.marker) {
      this.marker.setMap(null);
      this.marker = null;
    }
    if (this.infoWindow) {
      this.infoWindow.close();
      this.infoWindow = null;
    }
    if (this.markers.length > 0) {
      for (let i = this.markers.length - 1; i >= 0; i--) {
        var marker = this.markers[i];
        if (marker.cid == id) {
          marker.setMap(null);
          marker = null;
          this.markers.splice(i, 1);
          return i;
          break;
        }
        //break;
      }
    }
  },
  //绘制路线
  addLine(options) {
    var points = [];
    var xmin = options.coords[0][0],
      ymin = options.coords[0][1],
      xmax = options.coords[0][0],
      ymax = options.coords[0][1];
    options.coords.forEach(data => {
      var newxy = proj.wgsTomars(data)
      points.push({ lng: newxy[0], lat: newxy[1] });
      if (xmin > data[0]) xmin = data[0];
      if (ymin > data[1]) ymin = data[1];
      if (xmax < data[0]) xmax = data[0];
      if (ymax < data[1]) ymax = data[1];
    })
    var sy = {
      path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
      scale: 1,//图标缩放大小
      strokeColor: '#fff',//设置矢量图标的线填充颜色
      strokeWeight: '1',//设置线宽
      fillColor: '#ffffff',
      fillOpacity: 0.8,
      strokeOpacity:1
    };
    //设置轨迹样式 
    this.path = new google.maps.Polyline({
      path: points,
      geodesic: true,
      strokeColor: '#0000FF',
      strokeOpacity: 1.0,
      strokeWeight: 8,
      icons: [{
        icon: sy,
        offset: "10%",
        repeat: "10%",
      }]    
    });
    this.path.setMap(map);
    var bounds = new google.maps.LatLngBounds({ lng: xmin, lat: ymin }, { lng: xmax, lat: ymax});
    map.fitBounds(bounds);
  },
  //清除轨迹
  clearLine() {
    if (this.path) {
      this.path.setMap(null);
      this.path = null;
    }
  },
 //通过经纬度解析地址
  getLocation(options) {
    var geocoder = new google.maps.Geocoder;
    var pt = new BMap.Point(options.x, options.y);
    var latlng = { lng: options.x, lat: options.y }
    geocoder.geocode({ 'location': latlng }, function (results, statuas) {
      var address;
      if (results) {
        if (results[0])
          address = results[0].formatted_address
      }
      setTimeout(() => {
        options.callback(address);
      }, 300);
    });
  }
}
//百度地图
var gisBaidu = {
  marker: null,
  markers: [],
  path: null,
  infoWindow: null,
  initMap(divId) {
    //百度地图功能
    map = new BMap.Map(divId); // 创建Map实例
    // 初始化地图,设置中心点坐标和地图级别
    map.centerAndZoom(new BMap.Point(114.111295, 22.545573), 10);
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
      mapTypes: [
        BMAP_NORMAL_MAP,
        BMAP_HYBRID_MAP
      ]
    }));
    // 添加带有定位的导航控件
    var navigationControl = new BMap.NavigationControl({
      // 靠左上角位置
      anchor: BMAP_ANCHOR_TOP_LEFT,
      // LARGE类型
      type: BMAP_NAVIGATION_CONTROL_LARGE,
      // 启用显示定位
      enableGeolocation: true
    });
    // function showInfo(e){
    // 	alert(e.point.lng + ", " + e.point.lat);
    // }
    // map.addEventListener("click", showInfo); 
    map.addControl(navigationControl);
    map.setCurrentCity("深圳");
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    //滑动事件
    map.addEventListener("mousemove", function (e) {
      var p = e.point;
      $("#coordTip").html(p.lng + ',' + p.lat);
    });
  },
  //添加自定义描点功能
  addMarker(options) {
    if (options.id) {
      this.clearMarker(options.id);
    }
    var point = new BMap.Point(options.x, options.y);
    var marker;
    if (options.icon) {
      var iconObj = new BMap.Icon(options.icon, new BMap.Size(19, 31));
      marker = new BMap.Marker(point, { icon: iconObj, offset: new BMap.Size(0, -15) });
    } else {
      marker = new BMap.Marker(point);
    }
    marker.cid = options.id;
    this.markers.push(marker);
    map.addOverlay(marker);
    if (options.zoom) {
      map.centerAndZoom(point, 15);
    }
    var opts = {
      width: 300,     // 信息窗口宽度
      height: 120,     // 信息窗口高度
      title: "",// 信息窗口标题
      enableMessage: true,//设置允许信息窗发送短息
      message: "1111", 
    };
    if (this.infoWindow) {
      map.closeInfoWindow(this.infoWindow);
    }
    marker.addEventListener("click", function (e) {
      var content = options.popup(options.id);
      this.infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象 
      map.openInfoWindow(this.infoWindow, point); //开启信息窗口
    }.bind(this))
  },
  clearMarker(id) {
    if (this.marker) {
      this.marker.setMap(null);
      this.marker = null;
    }
    if (this.infoWindow) {
      map.closeInfoWindow(this.infoWindow);
    }
    if (this.markers.length > 0) {
      for (let i = this.markers.length - 1; i >= 0; i--) {
        var marker = this.markers[i];
        if (marker.cid == id) {
          map.removeOverlay(marker);
          marker = null;
          this.markers.splice(i, 1);
          return i;
          // break;
        }
        // break;
      }
    }
  },
  //添加自定义轨迹
  addLine(options) {
    var points = [];
    options.coords.forEach(data => {
      points.push(new BMap.Point(data[0], data[1]));
    })
    //如果轨迹存在则先清除上一次轨迹
    if (this.path) {
      this.clearLine();
    }
    var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
      scale: 0.4,//图标缩放大小
      strokeColor: '#fff',//设置矢量图标的线填充颜色
      strokeWeight: '1',//设置线宽
    });
    var icons = new BMap.IconSequence(sy, "10%", "10%");
    this.path = new BMap.Polyline(points, {
      strokeColor: "blue",
      strokeWeight: 8,
      strokeOpacity: 0.8,
      icons: [icons]
    });   //创建折线
    map.addOverlay(this.path);
    var view = map.getViewport(eval(points));
    var mapZoom = view.zoom;
    var centerPoint = view.center; map.centerAndZoom(centerPoint, mapZoom);
    map.centerAndZoom(centerPoint, mapZoom);
  },
  //清除线路
  clearLine() {
    if (this.path) {
      map.removeOverlay(this.path);
      this.path = null;
    }
 },
//通过经纬度逆解析出地址
  getLocation(options) {
    var geoc = new BMap.Geocoder();
    var pt = new BMap.Point(options.x, options.y);
    geoc.getLocation(pt, function (rs) {
      var address = rs.address;
      options.callback(address);
    });
  }
}

//语言切换
var gis;
initMap() {
    if (lang == "cn") {
      gis = gisBaidu;
    }
    else if (lang == "en") {
      gis = gisGoogle;
 }
 //地图画线
  function showMapLine(datas) {
    var points = [];
    datas.forEach(data => {
      points.push([data.Longitude, data.Latitude]);
    })
    //路径
    gis.addLine({
      coords: points
    });
    
    //起点
    gis.addMarker({
      id: "point_start",
      icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
      offset: [0, -15],
      size: [19, 31],
      x: points[0][0],
      y: points[0][1]
    })
    
    //终点
    gis.addMarker({
      id: "point_end",
      icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
      offset: [0, -15],
      size: [19, 31],
      x: points[points.length - 1][0],
      y: points[points.length - 1][1]
    })
  }
  
   //点击添加描点
    rowClick(row) {
       gis.addMarker({
         id: "tmp",
         x: row.Longitude,
         y: row.Latitude
       })
   },
   
  //将GPS坐标转换为百度坐标
   convertCoord(dataTable) {
        var _this = this;
        var convertor = new BMap.Convertor();
        var ci = 0;
        convert();
        //递归实现坐标转换--每次转换10个
        function convert() {
          var start = ci * 10;
          var end = start + 10;
          var newdata = dataTable.slice(start, end);
          var pointArr = [];
          newdata.forEach(data => {
            if (data.Longitude) pointArr.push(new BMap.Point(data.Longitude, data.Latitude));
          })
          //开始转换
          convertor.translate(pointArr, 1, 5, function (data) {
            if (data.status === 0) {
              data.points.forEach((pt, index) => {
                newdata[index].Longitude = pt.lng ? pt.lng.toFixed(6) : 0;
                newdata[index].Latitude = pt.lat ? pt.lat.toFixed(6) : 0;
              })
              ci++;
              if (ci * 10 >= dataTable.length) {
                _this.getLocation(dataTable);
                showMapLine(dataTable);
              } else {
                convert();
              }
            }
          });
      }
  },
      
 //根据坐标获取地理位置
    getLocation(dataTable) {
      var _this = this;
      var i = 0;
      //递归实现位置查询
      getsingleLocation();
        function getsingleLocation() {
          var data = dataTable[i];
          function getResult(address) {
            data.address = address;
            i++;
            if (i == dataTable.length) {
              _this.getPageData();
            } else {
              getsingleLocation();
            }
          }
          if (data.Longitude) gis.getLocation({ x: data.Longitude, y: data.Latitude, callback: getResult });
          else { i++; getsingleLocation(); }
        }
     }