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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

Q&A

解決済

1回答

3916閲覧

laefletでマーカーの検索をしたい

ohayou

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

0グッド

0クリップ

投稿2018/12/21 20:46

編集2018/12/21 20:48

leafletを用いて地図の生成をし、立てたマーカの検索をしたいのですがうまくいきません
どうすればいいのでしょうか。

マーカーには値はわたっています

javascript

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" /> 6<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script> 7<!-- Leaflet の読み込み --> 8<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet.css" /> 9<script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet-src.js"></script> 10<!-- Esri Leaflet の読み込み --> 11<script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0/esri-leaflet.js"></script> 12<!-- Esri Leaflet Geocoder の読み込み --> 13<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet.esri.geocoder/2.1.0/esri-leaflet-geocoder.css"> 14<script src="https://cdn.jsdelivr.net/leaflet.esri.geocoder/2.1.0/esri-leaflet-geocoder.js"></script> 15 16<!-- plugin --> 17 <link rel="stylesheet" href="leaflet-search.min.css"> 18 <script src="leaflet-search.min.js"></script> 19<!-- plugin --> 20 21<!--Load the AJAX API--> 22<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 23<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 24 25 26<body> 27<div id="map"></div> 28</body> 29 30<script type="text/javascript"> 31//マップ生成 32var map = L.map('map'); 33L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { 34 attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" 35}).addTo(map); 36map.setView([, ], 12); 37 38</script> 39 40<?php 41 42//mysql接続 43$pdo = new PDO($dsn, $user, $password); 44 45//データベースに値を挿入 46 $sql="INSERT INTO lnglat (name, comment, ido, keido) VALUES (:name, :comment, :ido, :keido)"; 47 $stmt = $pdo->prepare($sql); 48 $params = array(':name' => $name, ':comment' => $comment, ':ido' => $latitude, ':keido' => $longitude); 49 $stmt ->execute($params); 50 51$sql = 'SELECT * FROM lnglat'; 52$result = $pdo->query($sql); 53foreach($result as $row){ 54 $latitudes[]=$row['ido']; 55 $longitudes[]=$row['keido']; 56 $comments[]=$row['comment']; 57} 58$phpjson=json_encode($latitudes); 59$phpjson2=json_encode($longitudes); 60$phpjson3=json_encode($comments); 61?> 62 63<script type="text/javascript"> 64 var searchLayer = new L.LayerGroup(); 65 map.addLayer(searchLayer); 66 var controlSearch = new L.Control.Search({ 67 position:'topright', 68 layer: searchLayer, 69 initial: false, 70 zoom: 15, 71  marker: false 72 }); 73 map.addControl( controlSearch ); 74 75var test=JSON.parse('<?php echo $phpjson; ?>'); 76var test2=JSON.parse('<?php echo $phpjson2; ?>'); 77var test3=JSON.parse('<?php echo $phpjson3; ?>'); 78 79 80 81for(var i=0;i<test.length;i++){ 82//緯度経度取得 83 var lat=test[i]; 84 var lng=test2[i]; 85 var latlng = [lat, lng]; 86//コメント 87 var com=test3[i]; 88 89 var data=[ 90 {"lat":lat,"lng":lng, "com":com} 91 ]; 92 var marker=new L.Marker(new L.latLng(latlng),{com: com}); 93 marker.bindPopup(com); 94 searchLayer.addLayer(marker); 95 96 97} 98 99</script> 100</html>

以下エラー内容です。

Uncaught TypeError: Cannot read property 'properties' of undefined

at NewClass._searchInLayer (leaflet-search.min.js:1) at leaflet-search.min.js:1 at NewClass.eachLayer (LayerGroup.js:1) at NewClass._recordsFromLayer (leaflet-search.min.js:1) at NewClass._fillRecordsCache (leaflet-search.min.js:1) at leaflet-search.min.js:1

_searchInLayer @ leaflet-search.min.js:1
(anonymous) @ leaflet-search.min.js:1
eachLayer @ LayerGroup.js:1
_recordsFromLayer @ leaflet-search.min.js:1
_fillRecordsCache @ leaflet-search.min.js:1
(anonymous) @ leaflet-search.min.js:1
setTimeout (async)
_handleKeypress @ leaflet-search.min.js:1
(anonymous) @ leaflet-search.min.js:1
setTimeout (async)
(anonymous) @ leaflet-search.min.js:1
handler @ DomEvent.js:1

Uncaught TypeError: Cannot read property 'lat' of undefined

at NewClass.<anonymous> (kensakumap.php:69) at NewClass.fire (Events.js:1) at NewClass._fireDOMEvent (Map.js:1) at NewClass._handleDOMEvent (Map.js:1) at HTMLDivElement.handler (DomEvent.js:1)

参考サイト
https://kita-note.com/leaflet-tutorial-8

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

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

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

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

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

guest

回答1

0

自己解決

リンク先のtitleが変数だと思っていましたが内部関数だったので、titleという値をそのまま使うと解決できました。

投稿2018/12/27 17:56

ohayou

総合スコア18

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問