欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-15 15:06:08
...

定义两个对象分别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(); }
        }
     }
相关标签: vue.js技术栈