Vue.js 在Vue中绘制两点之间的路线

下面的代码工作正常，并在两点之间绘制了一条多段线，但我需要的是路径，所以搜索如何在这些点之间绘制路线，而不是使用vue2 google maps包绘制多段线

<template>
  <div>
    <div>
      <h2>Start</h2>
      <label>
        <gmap-autocomplete @place_changed="setStartPlace"></gmap-autocomplete>
        <button @click="addMarker">Add</button>
      </label>
      <br />
    </div>
    <div>
      <h2>End</h2>
      <label>
        <gmap-autocomplete @place_changed="setEndPlace"></gmap-autocomplete>
        <button @click="addMarker">Add</button>
      </label>
      <br />
    </div>
    <br />
    <gmap-map ref="xyz" :center="center" :zoom="4" style="width:100%;  height: 400px;">
      <gmap-marker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        @click="center=m.position"
      ></gmap-marker>
      <gmap-polyline v-bind:path.sync="path" v-bind:options="{ strokeColor:'#008000'}"></gmap-polyline>
    </gmap-map>
  </div>
</template>

<script>
export default {
  name: "GoogleMap",
  data() {
    return {
      // default to Montreal to keep it simple
      // change this to whatever makes sense
      center: { lat: 45.508, lng: -73.587 },
      markers: [],
      places: [],
      path: [],
      currentPlace: null
    };
  },

  mounted() {
    this.geolocate();
  },

  methods: {
    // receives a place object via the autocomplete component
    setStartPlace(place) {
      this.currentPlace = place;
    },
    setEndPlace(place) {
      this.currentPlace = place;
    },
    addMarker() {
      if (this.currentPlace) {
        const marker = {
          lat: this.currentPlace.geometry.location.lat(),
          lng: this.currentPlace.geometry.location.lng()
        };
        this.path.push(marker);
        this.markers.push({ position: marker });
        this.places.push(this.currentPlace);
        this.center = marker;
        this.currentPlace = null;
      }
    },
    geolocate: function() {
      navigator.geolocation.getCurrentPosition(position => {
        this.center = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
      });
    }
  }
};
</script>

开始
添加


终点
添加




导出默认值{
名称：“谷歌地图”，
数据（）{
返回{
//默认为Montreal以保持简单
//将此更改为任何有意义的内容
中心：{lat:45.508，lng:-73.587}，
标记：[]，
地点：[]，
路径：[]，
当前位置：空
};
},
安装的（）{
这是geologite（）；
},
方法：{
//通过“自动完成”组件接收放置对象
设置起始位置（位置）{
this.currentPlace=place；
},
setEndPlace（地点）{
this.currentPlace=place；
},
addMarker（）{
如果（此.currentPlace）{
常量标记={
lat:this.currentPlace.geometry.location.lat（），
lng:this.currentPlace.geometry.location.lng（）
};
这个.path.push（标记器）；
this.markers.push（{position:marker}）；
this.places.push（this.currentPlace）；
this.center=标记；
this.currentPlace=null；
}
},
地理定位：函数（）{
navigator.geolocation.getCurrentPosition（位置=>{
此.center={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
});
}
}
};

通过“在两点之间绘制路线”，我想您的意思是使用这个

您可以使用

vue2googlemaps

factory方法创建自己的组件。看更多

示例代码：

从“vue2谷歌地图”导入{MapElementFactory}；
导出默认MapElementFactory({
名称：“directionsRenderer”，
ctr（）{
返回google.maps.DirectionsRenderer；
},
事件：[]，
mappedProps:{}，
道具：{
原点：{type:Object}，
目标：{type:Object}，
travelMode:{type:String}
},
后创建（方向渲染器）{
让directionsService=new google.maps.directionsService（）；
这是一块50美元的手表(
（）=>[this.origin，this.destination，this.travelMode]，
() => {
设{origin，destination，travelMode}=this；
如果（！origin | | |！destination | |！travelMode）返回；
方向服务.路线(
{
起源，
目的地，
旅行模式
},
（响应、状态）=>{
如果（状态！=“OK”）返回；
directionsRenderer.setDirections（响应）；
}
);
}
);
}
});

然后使用它：

通过“在两点之间绘制路线”，我想你的意思是使用这个

您可以使用

vue2googlemaps

factory方法创建自己的组件。看更多

示例代码：

从“vue2谷歌地图”导入{MapElementFactory}；
导出默认MapElementFactory({
名称：“directionsRenderer”，
ctr（）{
返回google.maps.DirectionsRenderer；
},
事件：[]，
mappedProps:{}，
道具：{
原点：{type:Object}，
目标：{type:Object}，
travelMode:{type:String}
},
后创建（方向渲染器）{
让directionsService=new google.maps.directionsService（）；
这是一块50美元的手表(
（）=>[this.origin，this.destination，this.travelMode]，
() => {
设{origin，destination，travelMode}=this；
如果（！origin | | |！destination | |！travelMode）返回；
方向服务.路线(
{
起源，
目的地，
旅行模式
},
（响应、状态）=>{
如果（状态！=“OK”）返回；
directionsRenderer.setDirections（响应）；
}
);
}
);
}
});

然后使用它：

---

您对此有更新吗？您对此有更新吗？