LeafletでMapFan APIの検索結果を表示する

MapFan APIでは、以下のような検索APIを用意しています。

• 住所検索API（addr）
• 住所階層検索API（addrlist）
• 住所逆引き検索API（addrname）
• スポット検索API（spot）
• スポット周辺検索API（spotarea）
• 駅検索API（sta）
• 駅階層検索API（stalist）
• 最寄駅検索API（staarea）
• 郵便番号検索API（zip）

上記のうち太字で表記した検索機能について、以降で使い方をご紹介していきます。

住所検索API（addr）は、フリーワードで指定した住所文字列に対し、緯度経度や各住所階層コード値などを取得できます。
京都の通り名の検索にも対応しています。

入力ミスなどにより入力した住所が存在しなかった場合は、ヒットした上位階層までの住所で検索します。
どの階層までヒットしたかは、レスポンスに含まれる “level” で確認できます。

また、以下をはじめとした表記のゆらぎにも対応しています。

• 数値表現のゆらぎ（半角・全角・漢数字）
• 丁目・番地表現のゆらぎ（丁目・番地・ハイフン）
• 地名内の助詞のゆらぎ
  • が / ケ / ヶ（例：緑ケ丘）
  • つ / っ / ツ / ッ（例：三ツ沢）
  • の / ノ / 之（例：西之島）
  • る / ル（例：西入下る）
• 末尾の建物名（○○ビル等）の有無
• 大字・字の有無

// 住所検索API（addr）
var url = 'https://api-srch.mapfan.com/v1/addr?' + 'key=' + '【アクセスキー】' + '&addr=' + encodeURI('【住所文字列】') + '&callback=addrResult';
var script = document.createElement('script');
script.src = url;
document.head.appendChild(script);

// 実行結果
function addrResult(response) {
    if(response.status === 'success') {
        for(var result of response.results) {
            var marker = L.marker([result.lat, result.lon]).addTo(map);
            var content = result.zipcd + '<br>' + result.name + '<br>' + 'level: ' + response.level;
            switch(response.level) {
                case 0:
                    content += '（都道府県階層）'
                    break;
                case 1:
                    content += '（市区町村階層）'
                    break;
                case 2:
                    content += '（条町丁目階層）'
                    break;
                case 3:
                    content += '（番地階層）'
                    break;
                case 4:
                    content += '（号階層）'
                    break;
            }
            marker.bindPopup(content).openPopup();
        }
    }
}

住所階層検索API（addrlist）は、各住所階層の住所の一覧を取得することができます。

住所文字列を取得するにあたり、「都道府県 → 市区町村 → 町丁目 → 番地 → 号」の順でリストから選択して住所を組み立てるようにすることで、ユーザの手入力による誤記の混入を防ぐこともできます。

var resultMarkers = L.featureGroup();
resultMarkers.addTo(map);

// 住所階層検索API（addrlist）
function executeAddrlist(level, prefcd = null, citycd = null, tyocd = null, bancd = null) {
	// levelで指定された階層の検索に必要なパラメータの指定有無をチェック
    if((level >= 1 && prefcd == null) || (level >= 2 && citycd == null) || (level >= 3 && tyocd == null) || (level >= 4 && bancd == null)) {
        alert('parameter error');
        return;
    }
    var url = 'https://api-srch.mapfan.com/v1/addrlist?'
              + 'key=' + '【アクセスキー】'
              + '&level=' + level
              + (prefcd !== null ? '&prefcd=' + String(prefcd) : '')
              + (citycd !== null ? '&citycd=' + String(citycd) : '')
              + (tyocd !== null ? '&tyocd=' + String(tyocd) : '')
              + (bancd !== null ? '&bancd=' + String(bancd) : '')
              + '&callback=addrlistResult';
    var script = document.createElement('script');
    script.src = url;
    document.head.appendChild(script);
}

// 実行結果
function addrlistResult(response) {
    if(response.status === 'success') {
        resultMarkers.clearLayers();
        
        // Markerクラスでは検索結果情報の引き回しが難しいため、GeoJsonクラスを利用
        for(var result of response.results) {
            var geoJson = L.geoJSON({
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [result.lon, result.lat]
                },
                "properties": {
                    "name": result.name,
                    "level": result.level,
                    "prefcd": result.prefcd,
                    "citycd": result.citycd,
                    "tyocd": result.tyocd,
                    "bancd": result.bancd
                },
            }, {
                pointToLayer: function(feature, latlng) {
                    var marker = L.marker(latlng).bindTooltip(feature.properties.name);
                    
                    // クリックで下階層を検索
                    marker.on('click', e => {
                        executeAddrlist(parseInt(feature.properties.level) + 1, feature.properties.prefcd, feature.properties.citycd, feature.properties.tyocd, feature.properties.bancd)
                    });
                    return marker;
                }
            }).addTo(resultMarkers);
        }
        map.fitBounds(resultMarkers.getBounds());
    }
}

// 都道府県一覧を取得
executeAddrlist(0);

住所逆引き検索API（addrname）は、指定の緯度経度の住所が取得できます。

表示中の地図の中心座標やクリック位置の住所を取得したり、地図上からルートの出発地・経由地・目的地を選んでルートを探索する際の各ルート地点や、GPSなどによる緯度経度軌跡に対し、住所情報を付与することができます。

var resultMarker;

// クリック位置の住所を取得
map.on('click', e => {
    resultMarker = L.marker(e.latlng).addTo(map);
    
    // 住所逆引き検索API（addrname）
    var url = 'https://api-srch.mapfan.com/v1/addrname?' + 'key=' + '【アクセスキー】' + '&lonlat=' + e.latlng.lng + ',' + e.latlng.lat + '&callback=addrnameResult';
    var script = document.createElement('script');
    script.src = url;
    document.head.appendChild(script);
});

// 実行結果
function addrnameResult(response) {
    if(response.status === 'success') {
        if(map.hasLayer(resultMarker)) {
            resultMarker.bindPopup(response.zipcode + '<br>' + response.address).openPopup();
        }
    }
}

スポット検索API（spot）は、フリーワードで指定したスポットの緯度経度、住所、電話番号などを取得できます。
ジャンルや都道府県・市区町村などを指定して、ヒットするデータを絞り込むことも可能です。

// スポット検索API（spot）
var url = 'https://api-srch.mapfan.com/v1/spot?' + 'key=' + '【アクセスキー】' + '&name=' + encodeURI('【スポット名】') + '&callback=spotResult';
var script = document.createElement('script');
script.src = url;
document.head.appendChild(script);

// 実行結果
function spotResult(response) {
    if(response.status === 'success') {
        for(var result of response.results) {
            var marker = L.marker([result.lat, result.lon]).addTo(map);
            var content = '<p class="contentTitle">' + result.name + '</p>' + result.addr;
            content += result.tel ? '<br>' + result.tel : '';
            content += result.comment ? '<br>' + result.comment : '';
            marker.bindPopup(content);
        }
    }
}

スポット周辺検索API（spotarea）は、指定緯度経度周辺のスポットを近い順で取得できます。
検索範囲、キーワード、ジャンルなどを指定して、ヒットするデータを絞り込むことも可能です。

var resultMarkers = L.featureGroup();
resultMarkers.addTo(map);

// クリック位置周辺のコンビニ（gnrcd=15）を取得
map.on('click', e => {
    map.setView(e.latlng, map.getZoom());
    
    // スポット周辺検索API（spotarea）
    var url = 'https://api-srch.mapfan.com/v1/spotarea?' + 'key=' + '【アクセスキー】' + '&lonlat=' + e.latlng.lng + ',' + e.latlng.lat + '&gnrcd=15' + '&callback=spotareaResult';
    var script = document.createElement('script');
    script.src = url;
    document.head.appendChild(script);
});

// 実行結果
function spotareaResult(response) {
    if(response.status === 'success') {
        resultMarkers.clearLayers();

        for(var result of response.results) {
            var marker = L.marker([result.lat, result.lon]).addTo(resultMarkers);
            var content = '<p class="contentTitle">' + result.name + '<br>地図中心から ' + Math.round(result.distance) + ' [m]</p>' + result.addr;
            content += result.tel ? '<br>' + result.tel : '';
            content += result.comment ? '<br>' + result.comment : '';
            marker.bindPopup(content);
        }
    }
}

駅検索API（sta）は、フリーワードで指定した駅の緯度経度や路線名などを取得できます。
また、駅出入口検索設定を有効にすると、検索した駅の出入口も一覧で取得できます。

var resultMarkers = L.featureGroup();
resultMarkers.addTo(map);

var stationGateways = {};

// 駅検索API（sta）
var url = 'https://api-srch.mapfan.com/v1/sta?' + 'key=' + '【アクセスキー】' + '&name=' + encodeURI('【駅名】') + '&gateway=1' + '&callback=staResult';
var script = document.createElement('script');
script.src = url;
document.head.appendChild(script);

// 実行結果
function staResult(response) {
    if(response.status === 'success') {
        // 駅検索結果
        var stations = L.featureGroup();
        stations.addTo(map);
        for(var resultStation of response.station.results) {
            var marker = L.marker([resultStation.lat, resultStation.lon]).bindTooltip(resultStation.name).addTo(stations);

            // 駅出入口検索結果
            var gateways = L.featureGroup();
            for(var resultGateway of response.stationGateway.results) {
               	// 鉄道分類コード・鉄道会社コード・鉄道路線コード・路線内シーケンス番号 が一致する駅出入口を紐付け
                const hit = resultGateway.train_infos.item.some(item => {
                    return (resultStation.typecd === item.train_info.item[0].code && resultStation.corpcd === item.train_info.item[1].code && resultStation.linecd === item.train_info.item[2].code && resultStation.lineseq === item.train_info.item[3].code)
                });
                if(hit) {
                    gateways.addLayer(L.circleMarker([resultGateway.lat, resultGateway.lon], {
                        color: '#ff0000',
                        fillColor: '#ff0000',
                        fillOpacity: 0.6,
                    }).bindTooltip(resultGateway.name));
                }
            }
            stationGateways[resultStation.name] = gateways

            marker.on('click', e => {
                resultMarkers.clearLayers();
                var currentGateways = stationGateways[e.target._tooltip._content];
                currentGateways.addTo(resultMarkers);
                map.fitBounds(currentGateways.getBounds());
            });
        }
        map.fitBounds(stations.getBounds());
    }           
}

MapFan APIでは、今回ご紹介した以外にも、タウンページの情報を利用できるオプションや、スポット周辺検索の結果を多言語表記で取得できるオプションなども用意しています。

気になる機能がございましたら、下記のフォームよりお問い合わせください。

地図API　MapFan APIのお問い合わせは　こちら＞

MapFan API 仕様書ダウンロードは　こちら＞

MapFan APIの詳細は　こちら＞