Question

我使用了vue2-google-maps并设置了从一个国家到另一个国家的路径，但我希望有一条线可以跟踪它。虚线是具体的。这是我的代码

<gmap-map
:center="center"
:zoom="7"
style="width: 500px; height: 300px">
<gmap-marker
  v-for="m in markers"
  :position="m.position"
  :clickable="true"
  :draggable="true"
  @click="center=m.position"
></gmap-marker>

export default {
data () {
  return {
    center: {lat: 10.0, lng: 10.0},
    markers: [{
      position: {lat: 14.5995, lng: 120.9842},
      position: {lat: 14.2440, lng: 120.4278},
      position: {lat: 16.2325, lng: 119.3264}
    }, {
      position: {lat: 22.3964, lng: 114.1095}
    }]
  }
 }
}

Answer 1

你需要做这样的事情：

      <gmap-map v-bind:center="center" v-bind:zoom="12" style="width: 800px; height:500px" >
        <gmap-polyline v-bind:path.sync="path" v-bind:options="{ strokeColor:'#008000'}">
         </gmap-polyline>
      </gmap-map


export default {
    data () {
      return { 
        center: {lat: 55.915655, lng: -4.744502},
          path: [
            {lat: 55.9352001, lng: -4.7766924 },
            {lat: 55.9358131, lng: -4.7770143 },
            {lat: 55.9361256, lng: -4.7767353 },
            {lat: 55.9366784, lng: -4.7739458 }
]
            }
        }
      }

使用vue2-google-maps创建折线

1 个答案: