Vue 接 google 地图

第一步 引入goole 脚本

在 index.html 中

如果项目分测试环境http: 和正式环境 https:，最好 把http: 去掉

否者在https 上引入不了，而去掉后它就会默认之前页面的前缀，就是你自己分的测试和正式环境

需要配置的是 key google 申请的key 语言 language

第二步 创建地图

initGoogleMap(lat,lng){
  let _this = this

  var myLatlng = {lat:lat,lng:lng};
  _this.map = new google.maps.Map(this.$refs.bmap,{
    zoom:12,
    center:myLatlng,

    //不要地图上的 放大缩小  其他悬浮工具栏 设为true
    // disableDefaultUI: true,
    // navigationControl:false,
    // scaleControl: false

  });
//添加单击地图的  事件监听

  _this.map.addListener('click',function () {
    console.log('点击进入大页面')

   // 点击实际操作
    _this.$router.push({
      name:'TripMap'
    })
  })

第三步 添加坐标点

data 中参数

markers:[],//marker 数组
map:’’, //地图
tripCoordinates:[], // 坐标点
icon: require('./image/point.png’), // maker icon

往地图上添加 单个 marker

addMarkerWithTimeout(position,timeout){

  let _this = this

  window.setTimeout(function () {
    _this.markers.push(new  google.maps.Marker({
      position:position,
      map:_this.map,
      animation:google.maps.Animation.DROP,  //  maker  下落动画
      icon:_this.icon,      // 可以自定义   maker   图片
      // label:'这个上去了吗'
    }));
  }, timeout);
},

清空地图上的 maker

clearMarkers(){

  for (var i = 0; i < this.markers.length; i++){
    this.markers[i].setMap(null);
  }
  this.markers = [];
},

动画的方式 在地图上添加多个maker

drop(){

  this.clearMarkers()

  for(var i = 0; i < this.trip.cities.length; i ++){
    let city =  this.trip.cities[i]
    if(city.cityLat.length > 0 && city.cityLng.length){
      console.error()
      let position = {lat:parseFloat(city.cityLat),lng:parseFloat(city.cityLng)}
      this.tripCoordinates.push(position)
      // console.error('进来了3333333')
      this.addMarkerWithTimeout(position,i * 200);
    }
  }
},

第四部 如果要在各个maker 之间划线的话

addPath(){

  let _this = this
  // _this.tripCoordinates.push({lat:38.77216,lng:21.29113})
 
 //根据经纬度  点集   生成   path
    var tripPath = new google.maps.Polyline({
      path: _this.tripCoordinates,
      geodesic:true,
      strokeColor:'#888888',
      strokeOpacity:1.0,
      strokeWeight: 2

    });

//  把路径添加到  地图上

    tripPath.setMap(_this.map);
}