I've tried to make a google map in vuejs where the value of the center of my map is shown in my view.
For this, I created my marker and tried to update the value with this.marker = map.center.lng(); or this.setMarkerLng(map.center.lng()); inside an event listner of my method Initmap but none of them work. I got the message:
this is undefined
Outside the eventlistener, everything works.
Can you help?
export default {
mounted: function () {
this.initMap();
},
data() {
return {
marker: {
lng : 'latitude',
lat: 'longitude'
}
}
},
methods: {
///google map init
initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 48.587536, lng: 7.751440},
zoom: 13
});
this.setMarkerLat(map.center.lat());
this.setMarkerLng(map.center.lng());
///Listner
autocomplete.addListener('place_changed', function () {
///call method bug
this.setMarkerLat(map.center.lat());
this.setMarkerLng(map.center.lng());
infowindow.close();
this.marker.lat = map.center.lat();
this.marker.lng = map.center.lng();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("No details available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
},
setMarkerLng: function(lng) {
this.marker.lng = lng;
},
setMarkerLat: function(lat){
this.marker.lat = lat;
}
}
}
Try to use the arrow function ()=> in order to be able to access this scope like :
autocomplete.addListener('place_changed', ()=> {
...
}
Related
I want to put 'mqtt' value in span. But it doesn't work.
I think the loading method is wrong, but I don't know how to do it.
I don't know if the code below will suffice. Any help would be greatly appreciated.
Someone else coded similar to one page. Someone else's code has a value in 'detail', but my code doesn't. Why?
HTML
span{{ detail }}span //empty with nothing
Front script1
export default {
props: {
detail: {
type: Object
},
isAdd: {
type: Boolean,
default: false
},
},
data() {
return {};
},
mounted() {
this.$mqtt.subscribe('#');
},
methods: {
SendData() {
var temp = [];
var name = Number(document.getElementsByClassName('name').innerHTML);
temp.push(name);
var temp_current = data.payload.Temp_Current;
var error = data.payload.Error;
var data = {
//workcd: this.detail.namemodel,
Temp_Current: temp_current,
Error: error,
};
data = JSON.stringify(data);
var pub_name_arr = this.detail.name.split(' ');
var pub_name = 'CCComandTopic';
this.$mqtt.publish(
pub_name + '/' + pub_name_arr[1] + '/' + pub_name_arr[2],
data,
);
},
}
}
Front script 2
showHotrunner(namemodel, name, data) {
this.$modal.show(
Hotrunner,
{detail: {namemodel, name, data}, isAdd: true},
{width: '1040', height: '700', draggable: true},
);
const canvas = document.getElementById('three-canvas');
canvas.classList.add('noclick');
}
Back
var device = msg.topic.split("/")[2]
if(device == "hopper")
{
var temp_current = msg.payload.Temp_Current
var error = msg.payload.error
msg = {
topic : "CCComandTopic/hopper/1",
payload : {
ID: id,
"Error": error,
Temp_Current: temp_current,
}
}.
node.send(msg)
}
const scarlingProvider = vscode.languages.registerCompletionItemProvider(
'javascript',
{
provideCompletionItems(document, position, token, context) {
const linePrefix = document.lineAt(position).text.substr(0, position.character);
if (!hasChinese(linePrefix)) {
return undefined;
}
const reminds = starling.match(linePrefix)
console.log('reminds: ', reminds);
return [reminds].map(val => {
try {
const item = new vscode.CompletionItem(val, vscode.CompletionItemKind.Method)
item.insertText = `$t('${val}', '${linePrefix.trim()}')`
return item
} catch(err) {
console.log('err: ', err);
}
})
}
},
' '
As above, it's a snippet of a completion extension. I want the selected text to replace the original text instead of inserting that after the original text. What should I do?
You have to specify a range with your completion item. The model can give you the position of the original text for which the provider has been invoked:
const scarlingProvider = vscode.languages.registerCompletionItemProvider(
'javascript',
{
provideCompletionItems(document, position, token, context) {
const linePrefix = document.lineAt(position).text.substr(0, position.character);
if (!hasChinese(linePrefix)) {
return undefined;
}
const info = model.getWordUntilPosition(position);
const range = {
startLineNumber: position.lineNumber,
startColumn: info.startColumn - 1,
endLineNumber: position.lineNumber,
endColumn: info.endColumn,
};
const reminds = starling.match(linePrefix)
console.log('reminds: ', reminds);
return [reminds].map(val => {
try {
return {
label: "<a label>",
kind: CompletionItemKind.Method,
range,
insertText: `$t('${val}', '${linePrefix.trim()}')`,
detail: "<a description>",
}
} catch(err) {
console.log('err: ', err);
}
})
}
},
' '
I am getting data from firebase and overriding my roomName value in the loop. But outside the loop, it will not get the updated value.
Can someone please help me with the same?
export default {
name: "Chat",
components: {
ChatMessages
},
data(){
return{
rooms: [],
roomName: null,
}
},
mounted() {
this.getRooms();
},
methods: {
getRooms() {
roomsRef.orderByChild('name').once('value').then(snapshot => {
this.rooms = snapshot.val();
});
},
selectUser: function(userId) {
$.each(this.rooms,function(index,data){
if((data.sender_id == firebase.auth().currentUser.uid && data.receiver_id == userId ) || (data.sender_id == userId && data.receiver_id == firebase.auth().currentUser.uid )){
this.roomName = data.room_name;
}
});
if(this.roomName == null){
console.log("Null");
console.log(this.roomName);
}else{
console.log("Not Null");
console.log(this.roomName);
}
},
}
}
As pointed out by User 28 in the comment section, you need to use an arrow function:
$.each(this.rooms,(index,data) => {
if((data.sender_id == firebase.auth().currentUser.uid && data.receiver_id == userId ) || (data.sender_id == userId && data.receiver_id == firebase.auth().currentUser.uid )){
this.roomName = data.room_name;
}
});
Explanation. A "normal" function binds its own this. An arrow function inherits the this of the parent scope. Read more here: https://www.codementor.io/#dariogarciamoya/understanding-this-in-javascript-with-arrow-functions-gcpjwfyuc
This is the response returned by the server :
Using basic reverse geocoding provided by google
<script>
function geocodelatLng(){
var response = [
{
"address": "213 Marlon Forks\nSouth Corineland, HI 81723-1044",
"lat": "10.30431500",
"lng": "123.89035500"
},
{
"address": "1291 Stephania Road\nLake Dorotheastad, TN 82682-76",
"lat": "10.30309100",
"lng": "123.89154500"
},
{
"address": "20330 Schmeler Course Apt. 210\nNorth Ari, NV 70048",
"lat": "10.30356400",
"lng": "123.89964100"
}
] ;
return _.map(response,coords => {
// console.log(arr.index);
var geocoder = new google.maps.Geocoder;
var latLng = {
lat : parseFloat(coords.lat),
lng : parseFloat(coords.lng)
} ;
// for every lat,lng .
// console.log(latLng);
geocoder.geocode({'location': latLng},function (results,status){
if (status === 'OK') {
if (results[0]) {
console.log(results[0].formatted_address);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
});
}
this worked and it logs in the console 3 geocoded addresses. But when I use it with this package. It doesn't work this is my code.
geocodedAddress(){
let geocoder = new google.maps.Geocoder();
let theLocations = this.locations ;
return _.map(theLocations, addr => {
var geocoder = new google.maps.Geocoder();
var locationss = {
lat : parseFloat(addr.lat),
lng : parseFloat(addr.lng)
} ;
// var sampleLocation = { lat: 1.39, lng: 103.8 };
return new Promise(function(resolve, reject) {
geocoder.geocode({'location': locationss }, function(results, status){
if (status === 'OK') {
if (results[0]) {
return results[0].formatted_address;
} else {
console.log(status);
window.alert('No results found');
}
}
})
});
});
}
in my template :
<v-list-tile-content>
<v-list-tile-title v-text="geocodedAddress"></v-list-tile-title>
<v-list-tile-sub-title>{{ address.address }}</v-list-tile-sub-title>
</v-list-tile-content>
can you please help me what should i do with my code. Because I'm having a hard time with this .
geocodedAddress is async, you can't use it in HTML template.
You should create a data attribute (for example formatedAddresses) to store result from async request
data() {
return {
locations: [],
formatedAddresses: []
}
},
created() {
// for example, you can call it in created hooks
this.geocodedAddress()
},
methods: {
geocodedAddress() {
var self = this;
let geocoder = new google.maps.Geocoder();
let theLocations = this.locations ;
return Promise.all(_.map(theLocations, addr => {
var geocoder = new google.maps.Geocoder();
var locationss = {
lat : parseFloat(addr.lat),
lng : parseFloat(addr.lng)
} ;
// var sampleLocation = { lat: 1.39, lng: 103.8 };
return new Promise(function(resolve, reject) {
geocoder.geocode({'location': locationss }, function(results, status){
if (status === 'OK') {
if (results[0]) {
return results[0].formatted_address;
} else {
console.log(status);
window.alert('No results found');
return null
}
}
})
});
})).then(data => {
console.log(data)
this.formatedAddresses = data
})
}
}
and in template
<div v-for="address in formatedAddresses" :key="address">{{ address }}</div>
Working with the Google map API and routes or directions. I would like it such that when a user clicks a marker the route from the user's current location to that marker would render.
I have been studying the Google maps API documentation direction services example here.
Here is my attempt at adapting that. To me it seems this should work, so what am I missing? The route or direction between the user's current location and the marker is not rendering.
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="googleMap" style="width:60%;height:800px;"></div>
<script>
var myLatLng;
function geoSuccess(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
myLatLng = {
lat: latitude,
lng: longitude
};
var mapProp = {
// center: new google.maps.LatLng(latitude, longitude), // puts your current location at the centre of the map,
zoom: 15,
mapTypeId: 'roadmap',
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
//call renderer to display directions
directionsDisplay.setMap(map);
var bounds = new google.maps.LatLngBounds();
// var mapOptions = {
// mapTypeId: 'roadmap'
// };
// Multiple Markers
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'My location'
});
var markers = [
['Ragazzi', 53.201472, -6.111626],
['McDonalds', 53.200482, -6.111337],
['my location', latitude, longitude]
];
// Info Window Content
var infoWindowContent = [
['<div>' +
'<h3>Ragazzi</h3>' +
'<p>Cafe eatin place.</p>' + ' <button onclick="calculateAndDisplayRoute(marker, i)"> Get Directions</button>' + '</div>'
],
['<div class="info_content">' +
'<h3>McDonalds</h3>' +
'<p>Excellent food establishment, NOT!.</p>' + '<button onclick="calculateAndDisplayRoute(marker, i)"> Get Directions</button>' +
'</div>'
]
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(),
marker, i;
// Loop through our array of markers & place each one on the map
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
marker.addListener('click', function() {
directionsService.route({
// origin: document.getElementById('start').value,
origin: myLatLng,
destination: marker.getPosition(),
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
});
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
}
// function calculateAndDisplayRoute(directionsService, directionsDisplay) {
// directionsService.route({
// // origin: document.getElementById('start').value,
// origin: myLatLng,
// destination: marker.getPosition(),
// travelMode: 'DRIVING'
// }, function(response, status) {
// if (status === 'OK') {
// console.log('all good');
// directionsDisplay.setDirections(response);
// } else {
// window.alert('Directions request failed due to ' + status);
// }
// });
// }
function geoError() {
alert("Geocoder failed.");
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
// alert("Geolocation is supported by this browser.");
} else {
alert("Geolocation is not supported by this browser.");
}
}
</script>
<script async src="https://maps.googleapis.com/maps/api/js?key=api key here"></script>
</body>
</html>
Thanks,
I have solved this. The problem was the line,
destination: marker.getPosition(),
was not correct. This was giving me the coordinates of my current location and not the marker clicked.
I set the latit and longit in the function that sets the infoWindow, which have been defined as a global variable,
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
latit = marker.getPosition().lat();
longit = marker.getPosition().lng();
// console.log("lat: " + latit);
// console.log("lng: " + longit);
}
})(marker, i));
Then these are set to the destination,
marker.addListener('click', function() {
directionsService.route({
// origin: document.getElementById('start').value,
origin: myLatLng,
// destination: marker.getPosition(),
destination: {
lat: latit,
lng: longit
},
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
});
The full code is here on github.
A gh-pages working example.