-1
이것은 클라이언트가 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 코드는 내가 할 수 아약스 요청을 사용하여 값 위도와 LNG 값과 게시물을 캡처 할 수있는 방법
<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>
입니다. 만약 누군가가 저를 도와주기를 바랍니다. 마커를지도에 배치 할 수 있습니다. vue js를 사용하여 lat 및 lng 값을 게시해야합니까?
왜 그것을 확인하는 뷰 구성 요소로지도를 포장하지 않는다 기본 Vue 구성 요소의 하위 항목을 만들고지도 구성 요소에서 이벤트를 방출하여 위도 및 경도 데이터를 노출하십시오. 또는 구성 요소가 액세스 할 수 있도록 Vue 구성 요소 내에서지도를 초기화하면됩니다. Vue 구성 요소 인스턴스에 데이터를 연결하지 않고 Vue 구성 요소를 함께 사용합니다. –
같은 것을 달성하는 방법을 보여줄 수 있습니까? – coder
또한 질문에서 Google지도 API 키를 제거 할 수도 있습니다. –