前提・実現したいこと
サイトを表示した時現在の位置を表示したい
ここに質問の内容を詳しく書いてください。
Vue.jsでマップアプリを作ってます。
アプリを表示するときGeolocation error: Timeout expired.と出ます。
発生している問題・エラーメッセージ
Geolocation error: Timeout expired.
Uncaught TypeError: leaflet__WEBPACK_IMPORTED_MODULE_2___default.a.marker(...).addto is not a function
該当のソースコード
vue.js
<template>
<div id="app">
</div>
</template>
<script>
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions(
{
iconUrl : require('leaflet/dist/images/marker-icon.png'),
iconRetinaUrl : require('leaflet/dist/images/marker-icon-2x.png'),
shadowUrl : require('leaflet/dist/images/marker-shadow.png')
}
);
export default {
mounted(){
const map = L.map("app").addLayer(
L.tileLayer("https://{s}.tile.osm.org/{z}/{y}/{x}.png")
);
map.locate({ setView: true, maxZoom: 10});
function onLocationFound(e){
var radius = e.accuracy / 2;
L.marker(e.latlng)
.addTo(map)
.bindPopup("You are within" + radius + "meters from this point")
.openPopup();
L.circle(e.latlng, radius).addTo(map);
}
map.on("locationfound", onLocationFound);
function onLocationError(e){
alert(e.message);
}
map.on("locationerror", onLocationError);
}
};
</script>
<style>
html, body, #app {
height: 100%;
}
body{
margin: 0;
}
</style>
試したこと
git hubのソースコードと確認
補足情報(FW/ツールのバージョンなど)
Vue-cli最新
https://i-doctor.sakura.ne.jp/font/?p=40732
上記サイト参照
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。