質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Q&A

1回答

1371閲覧

Vue.jsで現在地表示

atsuki-_

総合スコア7

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

0グッド

0クリップ

投稿2020/01/17 03:49

編集2022/01/12 10:55

前提・実現したいこと

サイトを表示した時現在の位置を表示したい
ここに質問の内容を詳しく書いてください。
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
上記サイト参照

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

エラーメッセージは
Uncaught TypeError: leaflet__WEBPACK_IMPORTED_MODULE_2___default.a.marker(...).addto is not a function
になります。

投稿2020/01/17 04:19

atsuki-_

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問