如何通过对vue js中的每个搜索结果使用模态在谷歌地图上显示json数据获得的纬度和经度？

Posted 2023-02-23

【中文标题】如何通过对vue js中的每个搜索结果使用模态在谷歌地图上显示json数据获得的纬度和经度？

【英文标题】：How can I able to display latitude and longitude obtained by json data on google map by using modal for each of the search results in vue js?

【发布时间】：2018-04-26 23:42:15

【问题描述】：

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

我的json数据是

"status": true, "data": ["pid": 1, "bussinessName": "ld", "lat": 9.5273308, "lon": 76.8228674, "contactName": "bin", "pid": 2, "bussinessName": "lod", "lat": 9.523308, "lon": 76.8228674, "contactName": "son","pid": 3, "bussinessName": "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.bussinessName</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>

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

【问题讨论】：

对于每个搜索结果，当点击“查看地图”时，您是否需要使用该项目的经纬度以模态形式提供的谷歌地图？...您想要吗？

是的先生，我需要同样的

结合 Vue 和 Polymer。然后，您将能够使用 Polymer 的预制组件。例如，对于以坐标为中心的谷歌地图：<google-map latitude="37.790" longitude="-122.390"></google-map>.

@WaldemarIce 先生，我没听懂你......

@SecretCoder 寻找我的答案，这些预制组件是什么意思。

【参考方案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...