Question

如果我将硬代码标记放置在使用函数构建的位置，那么它不会绘图，则工作正常。在下面的代码中，只有两个标记出现在应为3的位置。

我尝试使用完整的vue浏览器脚本，因为它是静态标记对象，但可以正常工作，但是不能使用动态标记

<!DOCTYPE html>
<html lang="en">
<head>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
  <div id="root">
    <gmap-map ref="mymap" :center="startLocation" :zoom="14" style="width: 100%; height: 300px">

      <gmap-info-window :options="infoOptions" :position="infoPosition" :opened="infoOpened" @closeclick="infoOpened=false">
        {{infoContent}}
      </gmap-info-window>

      <gmap-marker v-for="(item, key) in coordinates" :key="key" :position="getPosition(item)" :clickable="true" @click="toggleInfo(item, key)" />

    </gmap-map>
  </div>

</body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
  <script src="vue-google-maps.js"></script>

<script>
var jsondata = {
   0: {
        full_name: 'Erich  Kunze',
        lat: '20.31',
        lng: '83.89'
      },
      1: {
        full_name: 'Delmer Olson',
        lat: '20.32',
        lng: '83.89'
      }
}

 $(function () {
 testdata();


;//= testdata();
Vue.use(VueGoogleMaps, {
  load: {
    key: 'AIzaSyBzlLYISGjL_ovJwAehh6ydhB56fCCpPQw'
  },
});

new Vue({
  el: '#root',
  data: {
    startLocation: {
      lat: 20.3157,
      lng: 83.8854
    },
    coordinates: jsondata,
    <!-- { -->
      <!-- 0: { -->
        <!-- full_name: 'Erich  Kunze', -->
        <!-- lat: '20.31', -->
        <!-- lng: '83.89' -->
      <!-- }, -->
      <!-- 1: { -->
        <!-- full_name: 'Delmer Olson', -->
        <!-- lat: '20.32', -->
        <!-- lng: '83.89' -->
      <!-- } -->
    <!-- }, -->
    infoPosition: null,
    infoContent: null,
    infoOpened: false,
    infoCurrentKey: null,
    infoOptions: {
      pixelOffset: {
        width: 0,
        height: -35
      }
    },
  },
  methods: {
    getPosition: function(marker) {
      return {
        lat: parseFloat(marker.lat),
        lng: parseFloat(marker.lng)
      }
    },
    toggleInfo: function(marker, key) {
      this.infoPosition = this.getPosition(marker);
      this.infoContent = marker.full_name;
      if (this.infoCurrentKey == key) {
        this.infoOpened = !this.infoOpened;
      } else {
        this.infoOpened = true;
        this.infoCurrentKey = key;
      }
    }
  }
});

});
function testdata(){
alert('chk');
jsondata[2] = {
full_name : 'chk',
lat:20.33,
lng:83.89
}
console.log(jsondata);
}


</script>

</html>

它应该绘制所有标记的两个静态和一个动态。

Answer 1

代码没有问题，现在相同的代码可以正常工作，它显示所有标记。它就像一个吊饰一样工作。

谢谢

无法使用Vue浏览器脚本绘制多个标记

1 个答案: