Vuejs yandex地图方向路线问题？

问题描述

如何使用 vue js 绘制路线？ 想用vue js画路由，文档里有javascript代码，但是用vue js没成功

Click icon after clicking the icon,a new map is creating(image)

https://vue-yandex-maps.github.io/en/guide/Map.html#events https://yandex.com/dev/maps/jsbox/2.1/router

/* eslint-disable */
import { yandexMap,ymapMarker } from "vue-yandex-maps";
export default {
  name: "HelloWorld",components: { yandexMap,ymapMarker },data() {
    return {
      coords: [55.099943,50.706567],options: {
        layout: "default#image",imageSize: [30,40],contentOffset: [0,0]
      },selectedSurfaces: this.$selectedSurfaces,layout:
        "<div>{{ properties.balloonContentHeader }}</div><div>{{ properties.balloonContentBody }}</div><div>{{ properties.balloonContentFooter }}</div>",surfaces: [
        {
          id: "42",city: "Moscow",type: "DSS",address:
            "Мира проспект,81 Б стр.1 (Крестовский путепровод) (A) в центр",side: "A",coords: "55.79873,37.63479"
        },{
          id: "43",address:
            "МКАД,1,720 км.,между Энтузиастов ш. – Рязанский пр. (A) внутреннее",coords: "55.76326,37.842143"
        },{
          id: "44",23,20 км.,между Волгоградский пр. – Каширское ш. (A) внутреннее",coords: "55.599295,37.745861"
        }
      ]
    };
  },mounted() {
    console.log(this.$selectedSurfaces[0]);
  },watch: {
    selectedSurfaces() {
      this.makeSurfaceSelected(
        this.selectedSurfaces[this.selectedSurfaces.length - 1].SURFACEID
      );
    }
  },methods: {
    selectedBillboard(billboard) {
      let data = {
        SURFACEID: billboard.surface_id,NETWORKID: billboard.networkid
      };
      return data;
    },toggleInfoWindow: function(carId) {
               var ymaps  = window.ymaps;

        ymap = new ymaps.Map ("ymapss",{
             center: [44.425585299999995,26.0775969],zoom: 10,controls: ['zoomControl','typeSelector','geolocationControl','trafficControl','fullscreenControl'] 
         });
         
         ymaps.route([
             'Brasov','Bucharest'
         ]).then(function (route){
             ymap.geoObjects.add(route);
             console.log(route);
             },function(error){
                alert("Ошибка. " + error.status +
                      ":" + error.message);
             }
        );

    },makeSurfaceSelected: function(surface_id) {
      this.surfaces.forEach(surface => {
        if (surface.surface_id === surface_id) {
          surface.selected = true;
        }
      });
    },mapBalloon: function(billboard,index) {
      return `
      <div><h1>${billboard.id}</h1>
      <p><strong>City</strong>: ${billboard.city}</p>
      <p><strong>Type</strong>: ${billboard.type}</p>
      <p><strong>Side</strong>: ${billboard.side}</p>
      <p><strong>Address</strong>: ${billboard.address}</p>
      </div>
      `;
    }
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.js"></script>
<template>
  <div class="hello">
    <yandex-map
      zoom="4"
      style="width: 100%; max-width: 100%; height: 98vh;"
      :coords="coords"
    >
      <ymap-marker
        v-for="(billboard,index) in surfaces"
        marker-type="placemark"
        :balloon-template="mapBalloon(billboard,index)"
        :coords="billboard.coords.split(',')"
        :marker-id="index"
        :icon="{ content: billboard.id }"
        @click="toggleInfoWindow(billboard.id)"        
        :key="index"
      ></ymap-marker>
    </yandex-map>
  </div>
</template>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）