Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

BingMaps:Pushpin画像のサイズ指定

More than 1 year has passed since last update.

BingMaps:Pushpinを画像にした場合の「画像サイズ指定」

【本記事の前提条件】

BingMapsのPushpinを使いはじめてる人
Pushpinで画像使用した際に「画像サイズの指定に困った人」

【 Pushpin とは? 】

Pushpinは以下画像のようにMap上の場所を示すときにつかう印し(Pushpin)です。
Pushpinを置く場合は「デフォルトPushpin」か「画像(自信で用意)」の選択ができます。

  • デフォルトのPushpinを使う方法 (デフォルトで色の変更は可能です( 例:#ff0000; )
    map0.jpg

  • Pushpinを自分で用意した画像で使用する方法
    map1.JPG

【 画像を使用したPushpinでのサイズ変更方法 】

画像を使用する場合には簡単に設定はできません。
以下「スクリプト全体」を見た後に、「1.追加スクリプト1」と「2.追加スクリプト2」の
2箇所のスクリプトを通常のPushpinを立てるスクリプトに追加することで可能になります。

【 スクリプト全体 】

例)imgSizeChg.html
<!-- Pushpin Object:https://msdn.microsoft.com/en-us/library/mt712673.aspx -->
<script src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[ *** Your My KEY *** ]' async defer></script>
<script>
    function GetMap() {
        let map = new Microsoft.Maps.Map('#myMap', {
            center: new Microsoft.Maps.Location(47.6149, -122.1941),
            zoom:15
        });

        //-------------------------------------------------------------------------
        //ImageSize1
        //-------------------------------------------------------------------------
        const scaleSize = 3; //scale!!ここで大きさを指定!!
        const imagePath = 'poi_custom.png';
        createScaledPushpin(map.getCenter(), imagePath, scaleSize, function(pin) {
            map.entities.push(pin); //MapにPushpinを追加!
        });

    }

    //-------------------------------------------------------------------------
    //ImageSize2
    //-------------------------------------------------------------------------
    function createScaledPushpin(location, imgUrl, scale, callback) {
        const img = new Image();
        img.onload = function () {
            const c = document.createElement('canvas');
            c.width = img.width * scale;    //scale
            c.height = img.height * scale;  //scale
            //Draw scaled image
            const context = c.getContext('2d');
            context.drawImage(img, 0, 0, c.width, c.height);
            const pin = new Microsoft.Maps.Pushpin(location, {
                icon: c.toDataURL()
            });
            //callback
            if (callback) {
                callback(pin);
            }
        };
        img.src = imgUrl;
    }


</script>

1.追加スクリプト1

コメントの"//ImageSize1"の箇所(5行のスクリプト)を「GetMap関数」に追加しましす。
※createScaledPushpin関数はこの後に定義します。

例)imgSizeChg.html
...

<script>
    function GetMap() {
        let map = new Microsoft.Maps.Map('#myMap', {
            center: new Microsoft.Maps.Location(47.6149, -122.1941),
            zoom:15
        });

        //-------------------------------------------------------------------------
        //ImageSize1
        //-------------------------------------------------------------------------
        const scaleSize = 3;                 //画像のScale値を設定
        const imagePath = 'poi_custom.png';  //Pushpin画像へのパス
        //以下 createScaledPushpin関数は次で定義します(この関数で画像のサイズを指定します)。
        createScaledPushpin(map.getCenter(), imagePath, scaleSize, function(pin) {
            map.entities.push(pin);
        });

    }

...

2.追加スクリプト2

コメントの"//ImageSize2"の箇所下には、
『 createScaledPushpin関数 』を定義します。

注意点!!「GetMap関数の外に記述」すること!!

例)imgSizeChg.html
...

    //-------------------------------------------------------------------------
    //ImageSize2
    //-------------------------------------------------------------------------
    function createScaledPushpin(location, imgUrl, scale, callback) {
        const img = new Image();    //Imageオブジェクトを生成
        img.onload = function () {  //この画像が読み込まれたら実行
            const c = document.createElement('canvas'); //Canvasを作成
            c.width = img.width * scale;    //scale-横幅
            c.height = img.height * scale;  //scale-縦幅
            //Draw scaled image
            const context = c.getContext('2d');                //Canvasに書き込み権限付与
            context.drawImage(img, 0, 0, c.width, c.height);   //Canvasに書き込む
            const pin = new Microsoft.Maps.Pushpin(location, { //Pushpinを作成
                icon: c.toDataURL()
            });
            //callback
            if (callback) {
                callback(pin); //Pushpin設定を関数の実行箇所に送る
            }
        };
        img.src = imgUrl; //画像のPathをセット
    }


...

注意ポイント!!

HTTP/HTTPS通信でブラウザ確認しないとErrorになるようです!!
VisualStudioCodeを使用していれば、以下の画像のように拡張機能「Live Share」を入れると簡単にHTTP/HTTPS通信での確認が可能です。
48426531_2382555675147708_1748399203865853952_o.jpg

【上記のサンプル動作は以下サイトで見れます!!】

1.以下の『 BingMaps GO! 』サイトにてコードも動作も見れます。
zoomit.png
2.以下リンクより
Pushpinカテゴリ >> 「Pushpin:Icon | Image Size」を選択

3.「Pushpinカテゴリ」→「Pushpin:Icon | Image Size」の順番で見てくださいね!

BmapQuery Download.

Github

daisu_yamazaki
ジーズアカデミー主席講師, デジタルハリウッド大学院[Agileラボ:担当教員], Microsoft MVP [2013-2021], 著書:はじめてのLaravel6入門~AWS Cloud9で学ぶ~
https://www.youtube.com/channel/UCmMFmjhf1BXB1tlLcbkVRrg
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away