BingMaps：Pushpin画像のサイズ指定

BingMaps：Pushpin画像のサイズ指定:

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

【 Pushpin とは？ 】

Pushpinは以下画像のようにMap上の場所を示すときにつかう印し（Pushpin）です。

Pushpinを置く場合は「デフォルトPushpin」か「画像（自信で用意）」の選択ができます。

• デフォルトのPushpinを使う方法 （デフォルトで色の変更は可能です( 例：#ff0000; )
  
  
  
  
• Pushpinを自分で用意した画像で使用する方法
  
  
  
  

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

画像を使用する場合には簡単に設定はできません。

以下「スクリプト全体」を見た後に、「１．追加スクリプト１」と「２．追加スクリプト２」の

２箇所のスクリプトを通常の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(), 
                anchor: new Microsoft.Maps.Point(c.width/2, c.height/2) 
            }); 
            //callback 
            if (callback) { 
                callback(pin); 
            } 
        }; 
        img.src = imgUrl; 
    } 
 
 
</script> 
 

１．追加スクリプト１

コメントの"//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); 
        }); 
 
    } 
 
... 

２．追加スクリプト２

コメントの"//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(), 
                anchor: new Microsoft.Maps.Point(c.width/2, c.height/2) 
            }); 
            //callback 
            if (callback) { 
                callback(pin); //Pushpin設定を関数の実行箇所に送る 
            } 
        }; 
        img.src = imgUrl; //画像のPathをセット 
    } 
 
 
... 

注意ポイント！！

HTTP/HTTPS通信でブラウザ確認しないとErrorになるようです！！

VisualStudioCodeを使用していれば、以下の画像のように拡張機能「Live Share」を入れると簡単にHTTP/HTTPS通信での確認が可能です。

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

１．以下の『 BingMaps GO! 』サイトにてコードも動作も見れます。

２．以下リンクより
Pushpinカテゴリ >> 「Pushpin：Icon | Image Size」を選択

３．「Pushpinカテゴリ」→「Pushpin：Icon | Image Size」の順番で見てくださいね！