在微信上添加自己店面的位置

.

.
.
.
.
.card
.card
.card-
.card-header
.card-header
.card-
.card-
.card-footer
.card-footer
.
.
.add-location-
.add-location-input:
.location-input-
.location-input-result:
.add-location-
.add-location-form input[type=\”submit\”] {
width: 100%;
padding: 0.5rem;
padding-bottom: 1rem;
border: none;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
background-color: #333;
color: #fff;
font-size: 18px;
cursor: pointer;
}
.add-location-form input[type=\”submit\”]:
.location-result-
.location-result-
.location-result-item
.location-result-item
.location-form-
.location-form-result:
.
@keyframes spinner {
0% { transform: rotate(360deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 767px) {
.card-
.card-
.card-
.location-input-
.location-form-
.
}
添加自己店面的位置
请输入地址名称
{{ location.name }}
请输入地址类型
{{ location.type }}
请输入地址详情
{{ location.description }}
function initLocationForm() {
const form = document.getElementById(\’location-form\’);
form.addEventListener(\’submit\’, event => {
event.preventDefault();
const locationInput = document.getElementById(\’location-input\’);
const locationInputResult = document.getElementById(\’location-result-list\’);
const locationSpinner = document.getElementById(\’location-spinner\’);
const latitude = document.getElementById(\’latitude\’).value;
const longitude = document.getElementById(\’longitude\’).value;
const addressName = document.getElementById(\’location-input\’).value;
const addressType = document.getElementById(\’location-input\’).value;
const addressDetails = document.getElementById(\’location-input\’).value;
const result = {
name: locationName,
type: locationType,
description: addressDetails
};
locationSpinner.classList.remove(\’spinner\’);
locationSpinner.textContent = \’…\’;
if (form.status === \’success\’) {
locationSpinner.classList.remove(\’spinner\’);
locationSpinner.textContent = 已成功添加位置${result.name};
locationResultList.innerHTML = `
${result.name}
${result.type}
${result.description}
${result.description}
`;
}
form.status = \’success\’;
});
}
window.addEventListener(\’load\’, () => {
const locationForm = document.getElementById(\’location-form\’);
const locationSpinner = document.getElementById(\’location-spinner\’);
initLocationForm();
window.addEventListener(\’popstate\’, () => {
initLocationForm();
});
});
const locationInput = document.getElementById(\’location-input\’);
const locationForm = document.getElementById(\’location-form\’);
const locationResultList = document.getElementById(\’location-result-list\’);
const locationSpinner = document.getElementById(\’location-spinner\’);
window.addEventListener(\’resize\’, () => {
locationForm.style.display = \’flex\’;
locationSpinner.style.display = \’none\’;
initLocationForm();
});
document.addEventListener(\’click\’, (event) => {
if (event.target.matches(\’#location-input\’) && event.target.closest(\’.location-input-result\’)) {
const result = event.target.closest(\’.location-input-result\’).innerHTML;
if (result) {
window.open(https://www.google.com/maps?q=${result}&z=3&ie=UTF-8&btn=E+&m=${event.clientY}&mz=${event.clientX}&address=${result});
}
}
});
initLocationForm();