• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

如何使用v-modal从以下脚本发布lat和lng的值?

JavaScript 来源:coder 12次浏览

这是我的代码,将标记放在客户端的google地图中。我如何能够捕获这些值并使用vue js发布这些值?如何使用v-modal从以下脚本发布lat和lng的值?

<script> 
function initMap() { 
    var uluru = { 
    lat: -25.363, 
    lng: 131.044 
    }; 
    var mapDiv = document.getElementById('map'); 
    var map = new google.maps.Map(mapDiv, { 
    zoom: 8, 
    center: uluru, 
    clickableIcons: true, 
    }); 

    google.maps.event.addListener(map, 'click', function(e) { 

    if (map.getClickableIcons()) { 
     var Latitude = e.latLng.lat(); 
     var Longitude = e.latLng.lng(); 
     // add your new marker with this info. 
     var marker = new google.maps.Marker({ 
     position: { 
      lat: Latitude, 
      lng: Longitude 
     }, 
     map: map, 
     draggable: true, 
     }); 
     map.clickableIcons = false; 
     // get latitude and longitude after dragging: 
     google.maps.event.addListener(marker, 'dragend', 
     function(marker){ 
      var latLng = marker.latLng; 
      currentLatitude = latLng.lat(); 
      currentLongitude = latLng.lng(); 

}); 


    } 
    }); 
} 
</script> 

<div id="map"></div> 
<!-- Replace the value of the key parameter with your own API key. --> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCu8vqg35dD4fNfxlI8ICoycehbL0F6bis&callback=initMap"> 
</script> 

我VUE js代码是

<script> 
submitBox = new Vue({ 
el: "#submitBox", 
    data: { 
    articles: [], 
    services: [], 
    lat : '', 
    lng : '', 
    username: '', 
    category: '', 
    subcategory: [], 

    }, 
methods: { 
    handelSubmit: function(e) { 
      var vm = this; 
      data = {}; 
      data['lat'] = this.lat; 
      data['lng'] = this.lng; 
      data['username'] = this.username; 
      data['category'] = this.category; 
      data['subcategory'] = this.subcategory; 
      $.ajax({ 
       url: 'http://127.0.0.1:8000/api/add/post/', 
       data: data, 
       type: "POST", 
       dataType: 'json', 
       success: function(e) { 
       if (e.status) 
       { 
       alert("Success") 

       window.location.href= "https://localhost/n2s/registersuccess.html"; 
      } 
       else { 
       vm.response = e; 

       alert(" Failed") 
       } 
      } 
      }); 
      return false; 
} 
}, 
}); 
     </script> 

我如何能捕捉纬度和经度值和岗位,重视使用Ajax请求。如果有人请帮助我实现这一目标,那将会很棒。我可以在地图上放置标记。我需要使用vue js发布lat和lng值?


===========解决方案如下:

您遇到的主要问题是您的Vue组件和地图相关的代码是分开的,您需要找出地图和Vue组件之间的通信方式。

通常你会在Vue组件中初始化地图,以便Vue组件承担地图及其数据/事件等的责任。

我不知道太多关于谷歌地图API,但这样的事情应该工作:


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)