Go to Qiita Advent Calendar 2024 Top
LoginSignup
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@daisu_yamazaki(Daisu Yamazaki)

BingMapsを簡単に使う関数を作る

Last updated at Posted at 2018-11-06

#【BingMapsを簡単に使う関数を作る】

##経緯
そもそも普通のプログラマはMapのドキュメントとサンプルで苦戦する
簡単に使いたいMap用のjqueryのようなライブラリがほしい・・・そこまで時間が使えない。
サクッと関数を作れば簡単に使えるのではと思い軽はずみな気持ちで作成しました。
元々の記事の続き

##前提条件
サンプルサイト「BingMapsGo!」の『Getting Started!!』 にてスタートに必要な知識を得て『KEY取得方法＆DIVタグやJS読み込み』に関して準備してから以下を始めるとGoodです。
＊JavaScriptの基礎知識がある人

##４つの関数：使い方


//Map表示
map = mapStart("divの#id", 緯度, 経度, "地図タイプ", zoom値);

//pushpin追加( 第４引数以降[ドラッグ,click,hover,表示] は 省略可 )
mapPushpin(map, 緯度 , 経度, "カラー", ドラッグ, click, hover, 表示);

//Infobox追加
mapInfobox(map, 緯度 , 経度, "タイトル", "説明");

//Mapを再表示（値を変更して再表示）
mapChangeView(map, 緯度 , 経度, "地図タイプ", zoom値);

##４つの関数：定義(2108/11/23更新)
(個人的によく使う４つの処理を関数化： 初期表示・表示変更・Pushpin・Infobox )
※ 関数にはNull・型チェックは入れてません。

bingMaps_funcs.js
//************************************************************************************
// BingMaps Functions
//************************************************************************************
"use strict";

/**
 * MapView
 * @method mapStart
 * @param target (string)  ["#id"]
 * @param lat    (float)   [47.6149]
 * @param lon    (float)   [-122.1941]
 * @param id     (string)  ["load","aerial","canvasDark","canvasLight","birdseye","grayscale","streetside"]
 * @param num    (int)     [1...20]
 * @returns {boolean=false} OR {Object=Map}
 */
function mapStart(target, lat, lon, id, num){
    //MapObject
    return new Microsoft.Maps.Map(target, {
        center: new Microsoft.Maps.Location(lat,lon), //Location center position
        mapTypeId: eval("Microsoft.Maps.MapTypeId."+id), //Type: [load, aerial,canvasDark,canvasLight,birdseye,grayscale,streetside]
        zoom: num  //Zoom:1=zoomOut, 20=zoomUp[ 1~20 ]
    });
}

/**
 * MapViewMove
 * @method mapChangeView
 * @param map    (object)  [mapObject]
 * @param lat    (float)   [47.6149]
 * @param lon    (float)   [-122.1941]
 * @param id     (string)  ["load","aerial","canvasDark","canvasLight","birdseye","grayscale","streetside"]
 * @param num    (int)     [1...20]
 */
function mapChangeView(map, lat, lon, id, num){
    //MapObject
    const loc = new Microsoft.Maps.Location(lat,lon);
    map.setView({
        mapTypeId: eval("Microsoft.Maps.MapTypeId."+id),
        center: loc,
        zoom: num,
        bounds:loc.bestView
    });
}

/**
* Pushpin:Add
* @method mapPushpin
* @param map    (object)   [mapObject]
* @param lat    (float)    [47.6149]
* @param lon    (float)    [-122.1941]
* @param color  (string)   ["#ff0000"]
* @param[arguments] drag   (boolean)  [true or false]
* @param[arguments] clicked (boolean) [true or false]
* @param[arguments] hover  (boolean)  [true or false]
* @param[arguments] visib  (boolean)  [true or false]
* @returns {boolean=false OR void }
*/
function mapPushpin(map, lat, lon, color){
    //Param Check
    let drag,clicked,hover,visib;
    if(map=="" || lat=="" || lon=="" || color==""){
        return false;
    }
    //arguments[4...7]
    if(typeof arguments[4]=="undefined" || arguments[4]==false){drag=false;}else{drag=true;};
    if(typeof arguments[5]=="undefined" || arguments[5]==false){clicked=false;}else{clicked=true;};
    if(typeof arguments[6]=="undefined" || arguments[6]==false){hover=false;}else{hover=true;};
    if(typeof arguments[7]=="undefined" || arguments[7]==true){visib = true;}else{visib=false;};
    const location =  new Microsoft.Maps.Location(lat,lon);
    const pin = new Microsoft.Maps.Pushpin(location, {
        color: color,                //Color
        draggable:drag,              //MouseDraggable
        enableClickedStyle:clicked,  //Click
        enableHoverStyle:hover,      //MouseOver
        visible:visib                //show/hide
    });
    map.entities.push(pin);
}

/**
 * Infobox:Add
 * @method mapInfobox
 * @param map    (object)   [mapObject]
 * @param lat    (float)    [47.6149]
 * @param lon    (float)    [-122.1941]
 * @param t      (string)   ["title"]
 * @param d      (string)   ["description"]
 */
function mapInfobox(map, lat, lon, t, d){
    //Infobox
    const location = new Microsoft.Maps.Location(lat,lon);
    const infobox  = new Microsoft.Maps.Infobox(location,{
        title: t,
        description: d
    });
    infobox.setMap(map); //Add infobox to Map
}

【 サンプル例 】

上記の４つの関数定義を読み込んでいれば以下の例を実行できます。
###１．MAP表示（ベーシック）

bingMaps_funcs_basic.html
    let map; //mapObject[mapはGlobalに置いたほうが便利に使い回せそうなので現時点ではそうしてます]
    function GetMap() {
        map = mapStart("#myMap", 47.6149, -122.1941, "load", 15); //Initialization processing
    }

image.png

###2．MAP表示（Pushpin追加：第４引数以降は省略可）

bingMaps_funcs_pushpin.html
    let map; //mapObject
    function GetMap() {
        map = mapStart("#myMap", 47.6149, -122.1941, "load", 18); //Initialization processing
        mapPushpin(map, 47.6149, -122.1941, "#ff0000", true,true,true,true); //pushpin
    }

image.png

###３．MAP表示（Infobox追加）

bingMaps_funcs.html
    let map; //mapObject
    function GetMap() {
        map = mapStart("#myMap", 47.6149, -122.1941, "load", 18); //Initialization processing
        mapPushpin(map, 47.6149, -122.1941, "#ff0000", true,true,true,true); //pushpin
        mapInfobox(map, 47.6149, -122.1941, "AAA", "Start"); //infobox
    }

image.png

###４．MAP表示（pushpin＆Infoboxを3秒後に２つ目追加）

bingMaps_funcs.html
    let map; //mapObject
    function GetMap() {
        map = mapStart("#myMap", 47.6149, -122.1941, "load", 18); //Initialization processing
        mapPushpin(map, 47.6149, -122.1941, "#ff0000", true,true,true,true); //pushpin
        mapInfobox(map, 47.6149, -122.1941, "AAA", "Start"); //infobox
    }

   //*********************************************************************
   //新しく追加： ３秒後に違う場所を中心に表示してPushpinとInfoboxを更に追加
   //*********************************************************************
    setTimeout(function () {
        mapChangeView(map,  47.6150, -122.1950, "load", 18);
        mapPushpin(map, 47.6150, -122.1950, "#ffff00", true,true,true,true);
        mapInfobox(map, 47.6150, -122.1950  , "BBB", "End");
    },3000);

image.png

###５．MAP表示（ClickEventで更にPushpin&Infobox追加）

bingMaps_funcs.html
    let map; //mapObject
    function GetMap() {
        map = mapStart("#myMap", 47.6149, -122.1941, "load", 18); //Initialization processing
        mapPushpin(map, 47.6149, -122.1941, "#ff0000", true,true,true,true); //pushpin
        mapInfobox(map, 47.6149, -122.1941, "AAA", "Start"); //infobox
    }

    //３秒後に違う場所を中心に表示してPushpinとInfoboxを更に追加
    setTimeout(function () {
        mapChangeView(map,  47.6150, -122.1950, "load", 18);
        mapPushpin(map, 47.6150, -122.1950, "#ffff00", true,true,true,true);
        mapInfobox(map, 47.6150, -122.1950  , "BBB", "End");
    },3000);

    //*********************************************************************
    // 新しく追加 ： ClickEvent
    //*********************************************************************
    document.querySelector("#myMap").onclick = function(){
        mapChangeView(map,  47.6160, -122.196, "load", 17);
        mapPushpin(map, 47.6160, -122.1960, "#ffff00", true,true,true,true);
        mapInfobox(map, 47.6160, -122.1960  , "CCC", "End");
    }

image.png

#サクッと作ってみた感想
できるだけ１行で一つの指示を完了させたいため、引数が多いものもありますが、
サクッと自分のアプリケーションでの仕様理解であれば軽く使えそうです。
※NullCheck・TypeCheck等は時間の都合上後回しにしてます。
BingMapsを使いやすくするライブラリなどでてくれればありがたいですね。
自分で作ればいいのかも・・・Githubに基本形上げて、Openにやれば数名でできそうですね。
プログラミング初心者にはこういう関数化すると便利なことを知ってほしいですね。
作業も捗りますね。
今後はちゃんと時間をかけて、汎用的なものを今度は作ってみたいと思います。

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?