0

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

单击图标后单击图标，正在创建新地图（图片）

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",
          city: "Moscow",
          type: "DSS",
          address:
            "МКАД, 1,720 км., между Энтузиастов ш. – Рязанский пр. (A) внутреннее",
          side: "A",
          coords: "55.76326, 37.842143"
        },
        {
          id: "44",
          city: "Moscow",
          type: "DSS",
          address:
            "МКАД, 23,20 км., между Волгоградский пр. – Каширское ш. (A) внутреннее",
          side: "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>

4

0 回答 0