google-maps - 使用vue2-google-maps创建折线

标签 google-maps vuejs2

我使用了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}
    }]
  }
 }
}

最佳答案

您需要执行以下操作:

      <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 }
]
            }
        }
      }

关于google-maps - 使用vue2-google-maps创建折线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43600392/

相关文章:

java - Android - Google map API 不显示 map

javascript - 通过自动完成服务获取邮政编码

javascript - 有没有办法在 scrollspy 下拉列表的文本没有监视任何内容时将其更新为默认文本?

javascript - 我们应该使用 v-model 来修改 Vuex store 吗?

javascript - 循环 Vue 组件数组

javascript - 使用 Google map API 进行反向地理编码

Android - 从 SupportMapFragment 中的 Google map 中删除流量

vue.js - 如何在 Vue.js 中的组件之间传输数据?

laravel - VeeValidate 即使使用键也验证不存在的字段错误

google-maps - 谷歌地图 V3 API 失败