BingMaps: 주소에서 위도 경도 획득(GeoCode)
BingMaps: 주소에서 위도 경도 획득(GeoCode)
【GeoCode】
여기서 GeoCode의 해설은 BingMaps의 코드를 설명하는 문장입니다.
Geocodeing은 주소에서 위도 경도를 얻는 방법입니다.
ReverseGeocodeing은 반대 위도 경도에서 주소를 찾는 방법입니다.
이번에는 Geocodeing의 샘플 코드를 소개합니다.
【이번 샘플의 동작】
텍스트 상자 "주소"검색할 수 있습니다.
결과는 h1 요소에 JSON으로 표시되도록합니다.
【HTML과 Javascript 2개로 분할해서 소개】
HTML
geocode.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>BingMaps GO! : Geocode Example</title>
<style>html,body,#main{height:100%;}body{padding:0;margin:0;background:#333;}h1{padding:0;margin:0;font-size:100%;color:white;}p{margin:0}</style>
</head>
<body>
<!-- MAP[START] -->
<header>
<h1 id="h1">BingMaps GO! (住所検索 → 緯度経度取得）</h1>
<p><input type="text" id="from" value="Seattle"> <button id="get">検索</button></p>
</header>
<div id="main">
<div id="myMap" style='width:100%;height:90%;'></div>
</div>
<!-- MAP[END] -->
자바스크립트
· BingMapsController를로드하는 첫 번째 외부 파일 읽기
[*** Your Map Key ***]의 위치를 자신이 취득한 BingMapsKey로 바꾸십시오.
geocode.html<script src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[*** Your Map Key ***]' async defer></script>
<script>
/**
* BingMapsControllerを読み込んだらGetMap()を実行
* @constructor
*/
let map; //MapObject用
let searchManager; //SearchObject用
function GetMap() {
//Map生成
map = new Microsoft.Maps.Map('#myMap', {
zoom: 15,
mapTypeId: Microsoft.Maps.MapTypeId.aerial
});
//検索モジュール指定
Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
//searchManagerインスタンス化（Geocode,ReverseGeocodeが使用可能になる）
searchManager = new Microsoft.Maps.Search.SearchManager(map);
//Geocode：住所から検索
geocodeQuery(document.getElementById("from").value);
});
}
/**
* 検索ボタン[Click:Event]
*/
document.getElementById("get").onclick = function(){
//4.Geocode:住所から検索
geocodeQuery(document.getElementById("from").value);
};
/**
* 住所から緯度経度を取得
* @param query [住所文字列]
*/
function geocodeQuery(query) {
if(searchManager) {
//住所から緯度経度を検索
searchManager.geocode({
where: query, //検索文字列
callback: function (r) { //検索結果を"( r )" の変数で取得
//最初の検索取得結果をMAPに表示
if (r && r.results && r.results.length > 0) {
//Pushpinを立てる
const pin = new Microsoft.Maps.Pushpin(r.results[0].location);
map.entities.push(pin);
//map表示位置を再設定
map.setView({ bounds: r.results[0].bestView});
//取得た緯度経度をh1要素にJSON文字列にして表示
console.log(r.results[0].location);
document.getElementById("h1").innerText = JSON.stringify(r.results[0].location);
}
},
errorCallback: function (e) {
alert("見つかりません");
}
});
}
}
</script>
</body>
</html>
【위도 경도의 취득 방법】
· 「//취득한 위도 경도를 h1요소에 JSON 문자열로 해 표시」 코멘트 개소의 이하 2행이 GeoCode에서의 결과인 「위도 경도」를 취득＆표시하고 있는 개소입니다.
· 「r.results[0].location 」을 console.log로 확인하는 것으로 데이터 취득의 내용을 확인하고 있습니다.
【샘플 코드】
BingMaps Go! (https://mapapi.org)
의 Geocode 카테고리의 「Geocode(주소 → 위도 경도)」를 확인해 주세요!
실제 동작을 확인할 수 있습니다. ※코드도 완전히 있습니다.
이쪽을 봐 주면 빠를지도.
있으면 좋은 샘플은 수시로 추가합니다.
※해외로부터의 액세스와 일본에서는 표시하고 있는 것이 다릅니다.
미래
앞으로는 위와 같은 샘플 코드를 늘릴 것입니다.
BingMaps GO! 를 잘 부탁드립니다. (^^)
Reference
이 문제에 관하여(BingMaps: 주소에서 위도 경도 획득(GeoCode)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/daisu_yamazaki/items/7281736f0a77cf8ab664
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>BingMaps GO! : Geocode Example</title>
<style>html,body,#main{height:100%;}body{padding:0;margin:0;background:#333;}h1{padding:0;margin:0;font-size:100%;color:white;}p{margin:0}</style>
</head>
<body>
<!-- MAP[START] -->
<header>
<h1 id="h1">BingMaps GO! (住所検索 → 緯度経度取得）</h1>
<p><input type="text" id="from" value="Seattle"> <button id="get">検索</button></p>
</header>
<div id="main">
<div id="myMap" style='width:100%;height:90%;'></div>
</div>
<!-- MAP[END] -->
<script src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[*** Your Map Key ***]' async defer></script>
<script>
/**
* BingMapsControllerを読み込んだらGetMap()を実行
* @constructor
*/
let map; //MapObject用
let searchManager; //SearchObject用
function GetMap() {
//Map生成
map = new Microsoft.Maps.Map('#myMap', {
zoom: 15,
mapTypeId: Microsoft.Maps.MapTypeId.aerial
});
//検索モジュール指定
Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
//searchManagerインスタンス化（Geocode,ReverseGeocodeが使用可能になる）
searchManager = new Microsoft.Maps.Search.SearchManager(map);
//Geocode：住所から検索
geocodeQuery(document.getElementById("from").value);
});
}
/**
* 検索ボタン[Click:Event]
*/
document.getElementById("get").onclick = function(){
//4.Geocode:住所から検索
geocodeQuery(document.getElementById("from").value);
};
/**
* 住所から緯度経度を取得
* @param query [住所文字列]
*/
function geocodeQuery(query) {
if(searchManager) {
//住所から緯度経度を検索
searchManager.geocode({
where: query, //検索文字列
callback: function (r) { //検索結果を"( r )" の変数で取得
//最初の検索取得結果をMAPに表示
if (r && r.results && r.results.length > 0) {
//Pushpinを立てる
const pin = new Microsoft.Maps.Pushpin(r.results[0].location);
map.entities.push(pin);
//map表示位置を再設定
map.setView({ bounds: r.results[0].bestView});
//取得た緯度経度をh1要素にJSON文字列にして表示
console.log(r.results[0].location);
document.getElementById("h1").innerText = JSON.stringify(r.results[0].location);
}
},
errorCallback: function (e) {
alert("見つかりません");
}
});
}
}
</script>
</body>
</html>
Reference
이 문제에 관하여(BingMaps: 주소에서 위도 경도 획득(GeoCode)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/daisu_yamazaki/items/7281736f0a77cf8ab664텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
