MapAPI の選択

Note記事： Google一択「WebサイトのMap」に一石を投じる！

こちらは、先日「 Note 」に書きましたので、良ければ見てください。
以下につながる話でもあります。

解説：Youtube動画を用意しました

どんなことができるか解説しています！

学習コストを減らしたライブラリと通常コードの比較

今回作成した「BmapQuery.js」はサンプルサイトでの動作確認や、Githubでのライブラリダウンロードが可能です。

サンプルサイト: BmapQuery.js
※沢山のサンプルコードがあるので是非試してください。
ライブラリダウンロード: Github
※Readmeにも基本サンプルコードを載せています。

◇1.シンプルな処理で比較

【処理内容】
・MAP表示
・MAPにPINを立てる
・MAPにINFOBOXを立てる

「ライブラリ無し」MapAPIを利用して書いたコード

:

    //Map表示
    const map = new Microsoft.Maps.Map('#myMap', {
        center: new Microsoft.Maps.Location(47.6149, -122.1941),
        zoom: 15
    });
    //Get MAP Infomation
    let center = map.getCenter();

    //PushPin
    let pin = new Microsoft.Maps.Pushpin(center);
    pin.metadata = {
         color: "#ff0000"
    };
    map.entities.push(pin); //Add Pushpin to Map

    //infobox
    let infobox = new Microsoft.Maps.Infobox(center, {
        title: 'title',
        description: 'description'
    });
    infobox.setMap(map); //Add infobox to Map

「ライブラリ有り」MapAPIを利用して書いたコード


//0. Map初期化
const map = new Bmap("#myMap");

//1. Map表示
map.startMap(47.6149, -122.1941, "load", 10);

//２．PushPinを立てる
let pin = map.pin(47.6149, -122.1941, "#ff0000");

//３．テキストボックスをMapに立てる
map.infobox(47.6149, -122.1941, "Title", "Description");

どちらも、このような結果で表示されます。

◇2.範囲円を作成するコードで比較

【処理内容】
・範囲円を描く

「ライブラリ無し」MapAPIを利用して書いたコード（１つ作成のコード）


//Map表示
map = new Microsoft.Maps.Map('#myMap', {
    center: new Microsoft.Maps.Location(47.6149, -122.1941),
    zoom: 12
});
//Circle設定
const style = {
    pinColor:"#0000ff",
    fillColor:"rgba(0,0,100,0.4)",
    strokeWidth:10
};
//Circle表示
const lat =47.6149;
const lon = -122.1941;
const meter = 3000;
//Load the spatial math module
Microsoft.Maps.loadModule("Microsoft.Maps.SpatialMath", function () {
    //Request the user's location
    const loc = new Microsoft.Maps.Location(lat, lon);
    //Create an accuracy circle
    const path = Microsoft.Maps.SpatialMath.getRegularPolygon(loc, meter, 36, Microsoft.Maps.SpatialMath.Meters);
    const poly = new Microsoft.Maps.Polygon(path,{
        fillColor: style.fillColor,
        strokeThickness: style.strokeWidth
    });
    map.entities.push(poly);
    //Event:add [click,mousedown,mouseout,mouseover,mouseup]
    if((event==="click" || event==="mousedown" || event==="mouseout" || event==="mouseover" || event==="mouseup") && typeof callback==="function"){
        Microsoft.Maps.Events.addHandler(poly, event, callback);
    }
    //Add a pushpin at the user's location.
    const pin = new Microsoft.Maps.Pushpin(loc,{
        color: style.pinColor
    });
    map.entities.push(pin);
});

※3つ作成のサンプルは少し長くなるので省略（下部のライブラリでは３つ作成しています）

「ライブラリ有り」MapAPIを利用して書いたコード（３つ作成）


//Map初期化
const map = new Bmap("#myMap");
map.startMap(47.6149, -122.1941, "load", 13);
//MapCircle設定
const style = {
      pinColor:"#0000ff",
      fillColor:"rgba(0,0,100,0.4)",
      strokeWidth:10
};
//以下３つのCircleを作成
map.circleSet(47.6200, -122.1100, 2000, style); //2000=2Km
map.circleSet(47.6000, -122.1599, 3000, style); //3000=3km
map.circleSet(47.6149, -122.1941, 1000, style); //1000=1km

ライブラリでは「３つ作成」ではこのような結果で表示されます。

◇3.ライブラリを使って「経路検索」

【処理内容】
・経路検索
ライブラリ使用： 3～4行
ライブラリ不使用：60～80行

経路検索：経由地あり（最短で3~4行）

//Map初期化
const map = new Bmap("#myMap");
map.startMap(47.6149, -122.1941, "load", 13);

//経由地あり
const array = ["新宿", "恵比寿"];                     //Waypoints...
map.direction("#direction", "walking", "御茶ノ水", "表参道", array);  //walking or driving

経路検索：経由地なし（最短で3~4行）


//Map初期化
const map = new Bmap("#myMap");
map.startMap(47.6149, -122.1941, "load", 13);

//経由地なし
const array = [];
map.direction("#direction", "walking", "御茶ノ水", "表参道, array ); //walking or driving

再掲、以下サイトから動作確認＆ライブラリダウンロード可能です

サンプルサイト: BmapQuery.js
ライブラリダウンロード: Github
沢山のサンプルコードがあるので是非試してください。

『 Map API 』超簡単ライブラリ（BmapQuery.js）