如何更改 Bing 地图图钉的大小？

Question

根据此处找到的文档 https://msdn.microsoft.com/en-us/library/gg427629.aspx，当向 PushpinOptions 对象添加宽度和高度属性时，pushin 拒绝使用指定的大小。相反，它的大小似乎基于用于它的图像的大小。

您可以通过在此处添加 "height:50, width:50" 来亲自尝试： http://www.bing.com/api/maps/sdk/mapcontrol/isdk#setPushpinColor+JS

谁能告诉我我做错了什么？

Answer 1

显然我混淆了 V7 和 V8 文档。不支持实际调整图钉图像的大小。

If you want to be able to scale the size of the pushpin, you will need to use an HTML5 canvas to render a scaled version of your image

您可以在此处找到代码示例： https://social.msdn.microsoft.com/Forums/en-US/909162ea-3ac5-4960-82ed-6ddf02eb6ead/alter-size-of-custom-pushpin-isnt-working?forum=bingmaps

这是从上面的 link 中提取的代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type='text/javascript'
            src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
            async defer></script>
    <script type='text/javascript'>
    function GetMap() {
        var map = new Microsoft.Maps.Map('#myMap', {
            credentials: 'Your Bing Maps Key'
        });

        createScaledPushpin(map.getCenter(), 'images/myPushpinIcon.png', 2, function (pin) {
            map.entities.push(pin);
        });
    }

    function createScaledPushpin(location, imgUrl, scale, callback) {
        var img = new Image();
        img.onload = function () {
            var c = document.createElement('canvas');
            c.width = img.width * scale;
            c.height = img.height * scale;

            var context = c.getContext('2d');

            //Draw scaled image
            context.drawImage(img, 0, 0, c.width, c.height);

            var pin = new Microsoft.Maps.Pushpin(location, {
                //Generate a base64 image URL from the canvas.
                icon: c.toDataURL(),

                //Anchor based on the center of the image.
                anchor: new Microsoft.Maps.Point(c.width/2, c.height/2)
            });

            if (callback) {
                callback(pin);
            }
        };

        img.src = imgUrl;
    }
    </script>
</head>
<body>
    <div id="myMap" style=";width:600px;height:400px;"></div>
</body>
</html>

Answer 2

请勾选这个

您可以指定图钉图像及其大小。请添加 px 与您指定的宽度和高度。

如何更改 Bing 地图图钉的大小？

How do I alter a Bing Maps Pushpin's size?

bing-maps

bing-api