第一步 引入goole 腳本

在 index.html 中

<script
  src="http://ditu.google.cn/maps/api/js?key=AIzaSyAXmxkZM3X8EirioIheSCskOIYjr4Msl6M&language=zh-CN"></script>

如果項(xiàng)目分測(cè)試環(huán)境http: 和正式環(huán)境 https:，最好 把http: 去掉

<script
  src="http://ditu.google.cn/maps/api/js?key=AIzaSyAXmxkZM3X8EirioIheSCskOIYjr4Msl6M&language=zh-CN"></script>

否者在https 上引入不了，而去掉后它就會(huì)默認(rèn)之前頁(yè)面的前綴，就是你自己分的測(cè)試和正式環(huán)境

需要配置的是 key google 申請(qǐng)的key 語(yǔ)言 language

第二步 創(chuàng)建地圖

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,

    //不要地圖上的 放大縮小  其他懸浮工具欄 設(shè)為true
    // disableDefaultUI: true,
    // navigationControl:false,
    // scaleControl: false

  });
//添加單擊地圖的  事件監(jiān)聽

  _this.map.addListener('click',function () {
    console.log('點(diǎn)擊進(jìn)入大頁(yè)面')

   // 點(diǎn)擊實(shí)際操作
    _this.$router.push({
      name:'TripMap'
    })
  })

第三步 添加坐標(biāo)點(diǎn)

data 中參數(shù)

markers:[],//marker 數(shù)組
map:’’, //地圖
tripCoordinates:[], // 坐標(biāo)點(diǎn)
icon: require('./image/point.png’), // maker icon

往地圖上添加 單個(gè) 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  下落動(dòng)畫
      icon:_this.icon,      // 可以自定義   maker   圖片
      // label:'這個(gè)上去了嗎'
    }));
  }, timeout);
},

清空地圖上的 maker

clearMarkers(){

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

動(dòng)畫的方式 在地圖上添加多個(gè)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('進(jìn)來(lái)了3333333')
      this.addMarkerWithTimeout(position,i * 200);
    }
  }
},

第四部 如果要在各個(gè)maker 之間劃線的話

addPath(){

  let _this = this
  // _this.tripCoordinates.push({lat:38.77216,lng:21.29113})
 
 //根據(jù)經(jīng)緯度  點(diǎn)集   生成   path
    var tripPath = new google.maps.Polyline({
      path: _this.tripCoordinates,
      geodesic:true,
      strokeColor:'#888888',
      strokeOpacity:1.0,
      strokeWeight: 2

    });

//  把路徑添加到  地圖上

    tripPath.setMap(_this.map);
}