Maps were not showing on the right after following the instructions step by step. The google api map itself is not showing.
(The API key is already in the script tag in my code, but I placed a placeholder instead here.)
Here is the video reference:
https://youtu.be/ID-_D0zJlSM
<div class="ten wide column segment ui m-0" ref="map"></div>
methods: {
locatorButtonPressed() {
navigator.geolocation.getCurrentPosition(
position => {
this.lat = position.coords.latitude;
this.lng = position.coords.longitude;
},
error => {
console.log("Error getting location");
}
);
},
findCloseByButtonPressed() {
const URL = `https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/place/nearbysearch/json?
location=${this.lat},${this.lng}
&type=${this.type}
&radius=${this.radius * 1000}
&key=`[KEY HERE]`;
axios
.get(URL)
.then(response => {
this.places = response.data.results;
this.addLocationsToGoogleMaps();
})
.catch(error => {
console.log(error.message);
});
},
addLocationsToGoogleMaps() {
var map = new google.maps.Map(this.$refs['map'], {
zoom: 15,
center: new google.maps.LatLng(this.lat, this.lng),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
this.places.forEach(place => {
const lat = place.geometry.location.lat;
const lng = place.geometry.location.lng;
let marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
google.maps.event.addListener(marker, "click", () => {
infowindow.setContent(
`<div class="ui header">${place.name}</div><p>${place.vicinity}</p>`
);
infowindow.open(map, marker);
});
});
}
}
}
if you want to implement map i prefer use this
click here
Related
I have an issue with the library vue-signature-pad, it works ok if I sign on the modal in a cellphone and I store the image, the size is ok but if I sign on the modal in the computer when I store the image it saves and I look at it.. it is very small.
So I wonder why if I sign in cellphone it stores in a good size but if I do same in a laptop I get a small signature?
My code:
<b-modal ref="signature_modal" size="xl" hide-footer title="Firmar en el recuadro blanco">
<VueSignaturePad
id="signature"
:customStyle="sigStyle"
width="100%"
height="200px"
ref="signaturePad"
:options="{onBegin: () => {$refs.signaturePad.resizeCanvas()}}"
/>
</b-modal>
export default {
created() {
},
mounted() {
this.$refs.signaturePad.$refs.signaturePadCanvas.width = 250
this.$refs.signaturePad.$refs.signaturePadCanvas.height = 250
},
methods: {
fileData() {
this.settlement_id = this.$route.params.id;
this.rut = this.$route.params.rut;
this.month = this.$route.params.month;
this.year = this.$route.params.year;
},
forceFileDownload(response) {
const url = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.href = url
link.setAttribute('download', 'liquidacion.pdf')
document.body.appendChild(link)
link.click()
},
undo() {
this.$refs.signaturePad.undoSignature();
},
save() {
const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
console.log(isEmpty);
console.log(data);
let formData = new FormData();
formData.append('signature', data);
axios.post('/api/signature/store?api_token='+App.apiToken, formData, config)
.then(function (response) {
currentObj.success = response.data.success;
})
.catch(function (error) {
console.log(error);
})
.finally(() => {
this.loading = false;
this.$awn.success("Usted firmo correctamente. Ya puede descargar el documento.", {labels: {success: "Éxito"}});
this.$router.push('/signature/show/'+this.$route.params.id+'/'+this.$route.params.rut+'/'+this.$route.params.month+'/'+this.$route.params.year+'');
});
}
I am getting AzureMap error and seeing this error, can you help me to fix this error?
I do not see any issue to see AzureMap, its working fine but not sure why its giving me this error.
Here is my code for AzureMap.
const AzureMap = ({ azureMapKey, selectedSite }) => {
const mapNodeRef = useRef();
const isNavExpanded = useSelector(commonSelectors.getIsNavigationExpanded);
const initializeMap = () => {
const mapNode = mapNodeRef && mapNodeRef.current;
const longitude =
!isNullEmptyOrUndefined(selectedSite?.longitude) &&
parseFloat(selectedSite?.longitude);
const latitude =
!isNullEmptyOrUndefined(selectedSite?.latitude) &&
parseFloat(selectedSite?.latitude);
if (!mapNode || !selectedSite) {
return false;
}
const map = new atlas.Map(mapNode, {
center: [longitude, latitude],
view: 'auto',
zoom: 10,
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: azureMapKey
}
});
map.setStyle({
autoResize: true,
showLogo: false,
showFeedbackLink: false
});
map.events.add('ready', function() {
// Create a HTML marker and add it to the map.
map.markers.add(
new atlas.HtmlMarker({
htmlContent: atlas.getImageTemplate('pin'),
color: '#1471DA',
anchor: 'top-left',
pixelOffset: [-5, -30],
position: [longitude, latitude]
})
);
});
};
useEffect(() => {
initializeMap();
}, [selectedSite?.siteId]);
useEffect(() => {
setTimeout(initializeMap, 200);
}, [isNavExpanded]);
return (
<div
ref={mapNodeRef}
className="bve-map-container"
data-testid="azure-map"
/>
);
};
export default AzureMap;
this is error I am seeing.
enter image description here
I have a code in Vuejs that it uploads a image but I need to check the width and height of that image I have my code like this:
This is my input :
<input ref="file" accept="image/png" type="file" class="form-control" v-on:change="onFileChange" required>
This is a method that I use to upload when select the image :
onFileChange(e){
this.file = e.target.files[0];
this.noFile = e.target.files.length;
},
This is my code to upload :
onSubmit(e) {
this.loading = true; //the loading begin
e.preventDefault();
let currentObj = this;
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
axios.post('/api/section/store?api_token='+App.apiToken, formData, config)
.then(function (response) {
currentObj.success = response.data.success;
})
.catch(function (error) {
console.log(error);
})
formData.append('file', this.file);
}
So I wonder how can I retrieve the width and height? I have tried this:
onFileChange(e){
this.file = e.target.files[0];
console.log(this.file.width);
this.noFile = e.target.files.length;
},
It says undefined, so how can I do that ?
A File object doesn't have a width and height. You would need to create an image object.
async onFileChange(e) {
this.file = e.target.files[0];
this.noFile = e.target.files.length;
const photoUrl = URL.createObjectURL(this.file);
const image = new Image();
const imageDimensions = await new Promise((resolve) => {
image.onload = () => {
const dimensions = {
height: image.height,
width: image.width,
};
resolve(dimensions);
};
image.src = photoUrl;
});
console.log(imageDimensions);
}
I am using konva with vuex together.
This is a code at '~.vue' for defining image.
There are two options onDragEnd and onTransform in "const yo".
'this.msg' and 'this.msg2' for the two options is defined in methods.
Thus, I can use the two options on realtime.
/gallery.vue
.
.
created() {
const image = new window.Image();
image.src = this.imageUpload.url;
image.onload = () => {
const yo = {
image: image,
name: "yoyo",
draggable: true,
scaleX: this.imageUpload.positions.scaleX,
scaleY: this.imageUpload.positions.scaleY,
x: this.imageUpload.positions._lastPosX,
y: this.imageUpload.positions._lastPosY,
onDragEnd: this.msg,
onTransform: this.msg2
};
this.images.push(yo);
};
},
methods: {
msg(e) {
this.savePositions(e.target.attrs);
},
msg2(e) {
this.savePositions(e.currentTarget.attrs);
},
But I want to move the code inside of 'created()' into 'vuex store' to control by one file.
Therefore, I make that in vuex store again like below.
And when I call this actions into 'gallery.vue', everything works well except the two options function as 'this.msg' and 'this.msg2'.
I guessed the problem would happen from 'e' argument. And I edited with various methods.
But that functions doesn;t work saying this.msg and this.msg2 is not function.
How can I call this function correctly?
Thank you so much for your reading.
/store.js
.
.
const actions = {
bringImage({ commit }) {
axios
.get(`http://localhost:4000/work`)
.then(payload => {
commit('pushWorks', payload);
})
.then(() => {
const image = new window.Image();
image.src = state.url;
image.onload = () => {
// set image only when it is loaded
const yo = {
image: image,
name: state.title,
draggable: true,
scaleX: state.positions.scaleX,
scaleY: state.positions.scaleY,
x: state.positions._lastPosX,
y: state.positions._lastPosY,
onDragEnd: this.msg,
onTransform: this.msg2
};
state.images.push(yo);
};
});
},
msg({ commit }, e) {
commit('savePositions', e.target.attrs);
},
msg2({ commit }, e) {
commit('savePositions', e.currentTarget.attrs);
}
}
You don't have this in your actions. So try to dispatch your actions with e argument as a payload.
bringImage({
commit,
dispatch
}) {
axios
.get(`http://localhost:4000/work`)
.then(payload => {
commit('pushWorks', payload)
})
.then(() => {
const image = new window.Image()
image.src = state.url
image.onload = () => {
// set image only when it is loaded
const yo = {
image: image,
name: state.title,
draggable: true,
scaleX: state.positions.scaleX,
scaleY: state.positions.scaleY,
x: state.positions._lastPosX,
y: state.positions._lastPosY,
onDragEnd: e => dispatch('msg', e),
onTransform: e => dispatch('msg2', e),
}
state.images.push(yo)
}
})
}
I'm using Mapbox to drop a marker on a map click. I successfully get the coordinates however I can't bind them to my data...
map.on('click', function(e) {
if (this.marker) { this.marker.remove() }
this.marker = new mapboxgl.Marker()
.setLngLat({ lng: e.lngLat.lng, lat: e.lngLat.lat})
.addTo(map);
map.flyTo({
center: { lng: e.lngLat.lng, lat: e.lngLat.lat },
zoom: 15
});
// This does not bind and update the data
this.latitude = JSON.stringify(e.lngLat.lat)
this.longitude = JSON.stringify(e.lngLat.lng)
})
It's a contextual binding issue. the this here does not refer to your vue instance but the map instead.
// fat arrow solves this
map.on('click', function(e) => {
})
// aliasing solves this
const self = this
map.on('click', function(e) {
})
// binding solves this
map.on('click', function(e) => {
}.bind(this))