如何更改Bing Maps图钉的大小?

时间:2016-09-20 15:12:49

标签: bing-maps bing-api

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

您可以通过添加"身高:50,宽度:50"在这里: http://www.bing.com/api/maps/sdk/mapcontrol/isdk#setPushpinColor+JS

有谁能告诉我我做错了什么?

2 个答案:

答案 0 :(得分:2)

显然我对V8文档感到困惑。不支持实际调整图钉图像的大小。

  

如果您希望能够缩放图钉的大小,则需要使用HTML5画布来渲染图像的缩放版本

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

以下是从上面的链接中获取的代码:

<!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>

答案 1 :(得分:0)

请检查一下Multiple Custom Markers with Bing Maps API

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