Question

我正在尝试在我的Web应用程序（AirBNB参考）中执行此精确标记：

但是，我提出了两个主要问题：

1st：我不知道如何制作看起来像它的自定义标记。

第二：我想让它的宽度变化，所以，如果我的房产价格为1234美元或56美元，泡泡应该改变尺寸。

任何人都可以帮助我吗？

我使用了在互联网上找到的这段代码，但路径会产生一个不符合要求的气泡。

var marker = new MarkerWithLabel({
                position: myLatLng,
                map: map,
                labelContent: "$1234",
                labelAnchor: new google.maps.Point(15, 65),
                labelClass: "labels", // the CSS class for the label
                labelInBackground: false,
                icon: pinSymbol('#F48600'),
                id: obj['Property']['id'],
                html: someHTML 
            });

//The responsible for making the marker look "pretty".
function pinSymbol(color) 
{
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#F48600',
        strokeWeight: 2,
        scale: 2
    };
}

Answer 1

如果您获得了图像的副本，则可以尝试浏览标记选项[ref. google]的图标对象，而不是创建符号。将google.maps.Icon.url设置为图像。

图标对象规范也可能适用于此问题。见google.maps.Icon.scaledSize。这会向上或向下缩放图像。 icon.scaledSize需要是google.maps.Size个对象，因此我尝试编写一个自定义方法，根据您的成本比例返回一个新的大小对象。

var marker = new MarkerWithLabel({

  ...

  icon: {
    url: 'marker.jpg',
    scaledSize: iconSize(1234)             
  },

  ...
});

// a crude scale solution
var WIDTH_RANGE = {
  min: 50, // pixels
  max: 200,
};
var HEIGHT_RANGE = {
  min: 20,
  max: 50
};
var COST_RANGE = {
  min: 0,
  max: <max cost> // dynamically set a max cost somehow
};

function iconSize (cost) {
  var scaleFactor = cost / (COST_RANGE.max - COST_RANGE.min);
  var width = (WIDTH_RANGE.max - WIDTH_RANGE.min) * scaleFactor + WIDTH_RANGE.min;
  var height = (HEIGHT_RANGE.max - HEIGHT_RANGE.min) * scaleFactor + HEIGHT_RANGE.min;

  return new google.maps.Size(width, height);
}

如何使Google Maps Markets成为动态矩形

1 个答案: