向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
有谁能告诉我我做错了什么?
答案 0 :(得分:2)
显然我对V8文档感到困惑。不支持实际调整图钉图像的大小。
如果您希望能够缩放图钉的大小,则需要使用HTML5画布来渲染图像的缩放版本
以下是从上面的链接中获取的代码:
<!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
以及您指定的宽度和高度。