如何在vue js中对每个搜索结果使用modal来显示google地图上json数据获取的经纬度？

Question

我有以下 json 数据的搜索结果。每个搜索结果都有纬度和经度。因此，对于每个搜索结果，当我单击查看地图时，都会弹出一个模式并显示谷歌地图上的标记..但是使用以下代码我不会得到相同的..

我的json数据是

{"status": true, "data": [{"pid": 1, "businessName": "ld", "lat": 9.5273308, "lon": 76.8228674, "contactName": "bin"}, {"pid": 2, "businessName": "lod", "lat": 9.523308, "lon": 76.8228674, "contactName": "son"},{"pid": 3, "businessName": "rd", "lat": 9.5273308, "lon": 76.822867, "contactName": "in"}]}

我的vue js代码是

 <script>
    searchContent = new Vue({
            el: "#searchContent",
            data: {
              vector: {}
            }
          });
    categories = new Vue({
        el: '#categories',
        data: {
            articles: [],
            services: [],
            category: 0,
            subcategory: 0,
            content: false
        },
         mounted() {
        var vm = this;

        $.ajax({
            url: "/get_all_category/",
            method: "GET",
            dataType: "JSON",
            success: function(e) {
                    console.log(e); 
                
                 vm.articles = e;
                console.log(vm);

            },
        });
    },
              methods: {
              prefetch: function() {
                var filter = {};
                filter['category'] = this.category;
                if (this.content !== false)
                  this.content.abort()
                this.content = $.ajax({
                  'url': 'https:/filter/',
                  data: filter,
                  dataType: "JSON",
                  type: "POST",
                  success: function(e) {
                     window.searchContent.vector = e.data;
                    console.log(e);
 
                    var options = { 
     zoom: 8, 
     center: new google.maps.LatLng(e.data.lat , e.data.lon), // Centered 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: false 
     }; 
    
     // Init map 
     var map = new google.maps.Map(document.getElementById('mapName'), options); 
     //use code 
    var i=0;
    
    
     // Init markers 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(e.data.lat , e.data.lon), 
     map: map, 
     title: 'Click Me ' + i, 
     }); 
    
     // Process multiple info windows 
     (function(marker, i) { 
     // add click event 
     google.maps.event.addListener(marker, 'click', function() { 
     infowindow = new google.maps.InfoWindow({ 
     content: e.data.lat 
     }); 
     infowindow.open(map, marker); 
     }); 
     })(marker, i); 
                  }
                })
              }
            }
    
    })
    </script>

我的 html 代码显示相同的是

 <div id="searchContent" >
    <div v-for="row in vector" >
    <h6>{{row.businessName}}</h6>
<div>
<a data-toggle="modal" data-target="#myModal1">View Map</a></div>
    </div>
    </div>




<div id="myModal1" class="modal fade" role="dialog">
  <div class="modal-dialog">
      <!-- Modal content-->
      <div id="mapName" style="width:667px; height: 370px" />
    <!-- Replace the value of the key parameter with your own API key. -->
    </div>
      </div>
    </div>

因此，当我点击视图地图时，我需要显示与搜索结果对应的标记。谁能帮我解决这个问题吗？

Answer 1

警告：这不是一个解决方案 - 以下代码仅演示使用现成的 Web 组件是多么容易。我只是认为，这些信息有其价值并且与这个问题相关，因为它可以极大地简化您的代码/解决方案/生活:)

---

看这个例子。它使用来自 webcomponents.org 的外部、现成的基于聚合物的自定义 Web 组件。正如您所看到的，这些组件与 Vue 完全互操作。您不仅可以使用它们，还可以完全控制它们的属性。最重要的是，您可以监听它们的自定义事件，就像在其他 Vue 组件中一样......

因此，这可能是实现您所需的最简单的方法。只需用模态包装

my-map

并将属性设置为正确的值...当然，请查看为该

google-map

组件提供的文档链接。

Vue.component('my-map', {
  template: '#my-map',
  props: ['lat', 'long'],
  data () {
    return {
      latitude: '',
      longitude: ''
    }
  },
  methods: {
    setCoords (e) {
      if (e.type === 'latitude-changed')
        this.latitude = e.detail.value
      if (e.type === 'longitude-changed')
        this.longitude = e.detail.value
    }
  }
})

new Vue({
  el: '#app'
})

google-map {
  height: 186px;
}

<base href="https://raw-dot-custom-elements.appspot.com/GoogleWebComponents/google-map/v2.0.2/google-map/">
<link rel="import" href="google-map.html">

<div id="app">
  <my-map lat="37.78" long="-122.4"></my-map>
</div>

<template id="my-map">
  <div>
    Marker coords: lat {{ latitude }} / long {{ longitude }}
    <google-map fit-to-marker api-key="AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc">
      <google-map-marker
        :latitude="lat"
        :longitude="long"
        draggable="true"
        slot="markers"
        title="Your location"
        @latitude-changed="setCoords"
        @longitude-changed="setCoords"
      >
      </google-map-marker>
    </google-map>
  </div>
</template>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

老实说......我认为 Vue 和基于 Polymer 的自定义 Web 组件的组合是非常棒。现在，人们可以通过漂亮的声明性语法实现令人难以置信的结果。您是否注意到，在这个示例中没有额外的 JavaScript？是的，现代浏览器可以使用这些自定义组件没有额外的开销。对于较旧的浏览器，有一个polyfill...