Google maps Google Maps API自定义标记SVG大小和位置

从div数据属性创建自定义Google地图标记SVG时，如何控制SVG的大小？默认情况下，谷歌正在让它变得巨大。如果我使用CSS，定位是完全关闭的。GoogleAPI文档与下面的有点不同，我不知道如何让它工作。欢迎提供任何信息

这是标记HTML：

<div class="marker" data-lat="<?php echo $loc_address_lat; ?>" data-lng="<?php echo $loc_address_lng; ?>" data-marker="/custom-pin-<?php echo $map_marker_color; ?>.svg">

这是一把小提琴： 是的属性，而不是的属性

对于超过256个标记，需要在

标记

对象上设置

优化：false

，以防止剪切

像这样使用它：

var marker = new google.maps.Marker({
  position: latlng,
  map: map,
  icon: {
    url: $marker.attr('data-marker'),
    scaledSize: new google.maps.Size(30, 30),
  }
});

代码片段：

/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
.大型acf地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，
身体{
身高：100%；
保证金：0；
填充：0；
}

（函数（$）{
函数渲染映射（$el）{
//变量
var$markers=$el.find（'.marker'）；
//瓦尔斯
变量args={
缩放：16，
中心：新google.maps.LatLng（0,0），
mapTypeId:google.maps.mapTypeId.ROADMAP，
//mapTypeId:google.maps.mapTypeId.HYBRID
};
//创建地图
var map=new google.maps.map（$el[0]，args）；
//添加标记引用
map.markers=[]；
//添加标记
$markers.each（函数（）{
添加_标记（$（此），映射）；
});
//中心地图
中心地图（地图）；
}
//在每个窗口之外创建信息窗口-然后告诉单个信息窗口根据单击交换内容
var infowindow=new google.maps.infowindow({
内容：“”
});
/*
*添加标记
*
*此功能将向选定的Google地图添加标记
*
*@type函数
*@date 8/11/2013
*@自4.3.0以来
*
*@param$marker（jQuery元素）
*@param-map（谷歌地图对象）
*@return不适用
*/
函数add_marker（$marker，map）{
//变量
var latlng=new google.maps.latlng（$marker.attr（'data-lat'），$marker.attr（'data-lng'）；
//创建标记
var marker=new google.maps.marker({
位置：latlng，
地图：地图，
图标：{
url:$marker.attr（'data-marker'），
scaledSize：新的google.maps.Size（30,30），
}
});
//添加到数组
map.markers.push（marker）；
//如果标记包含HTML，则将其添加到信息窗口
如果（$marker.html（））{
//单击标记时显示信息窗口并关闭其他标记
google.maps.event.addListener（标记'click'，函数（）{
//交换单一信息窗口的内容
setContent（$marker.html（））；
信息窗口。打开（地图、标记）；
});
//单击地图时关闭信息窗口
google.maps.event.addListener（映射，'click'，函数（事件）{
如果（信息窗口）{
infowindow.close（）；
}
});
}
}
/*
*中心地图
*
*此功能将使地图居中，显示附加到此地图的所有标记
*
*@type函数
*@date 8/11/2013
*@自4.3.0以来
*
*@param-map（谷歌地图对象）
*@return不适用
*/
功能中心地图（地图）{
//瓦尔斯
var bounds=new google.maps.LatLngBounds（）；
//循环遍历所有标记并创建边界
$.each（map.markers，function（i，marker）{
var latlng=new google.maps.latlng（marker.position.lat（），marker.position.lng（））；
边界扩展（latlng）；
});
//只有一个标记？
如果（map.markers.length==1）{
//设置地图中心
map.setCenter（bounds.getCenter（））；
map.setZoom（16）；
}否则{
//合拍
映射边界（bounds）；
}
}
/*
*文件准备就绪
*
*此函数将在文档准备就绪（页面已加载）时呈现每个地图
*
*@type函数
*@date 8/11/2013
*@自5.0.0以来
*
*@param不适用
*@return不适用
*/
$（文档）.ready（函数（）{
$（'.large acf map'）。每个（函数（）{
渲染_贴图（$（此））；
});
});
})（jQuery）；

Awesome的副本！这是可行的；但是，我注意到，如果有超过255个标记，SVG就会被剪裁。我已经玩了“大小”、“原点”、“锚”和“缩放大小”几个小时了。我尝试了不同的SVG图像，但已经排除了这个变量。这里更新了254多个测试地点：这是一个不同的问题。是吗？答案似乎只是部分解决了这个问题。SVG在某些情况下会调整大小，但在其他情况下不会。我非常欣赏这个答案，但我不能在我的开发中使用它，因为图标在缩放时都会被剪裁。这个问题已经结束。将“优化”设置为false（在标记上），它可以无限工作（性能可能会受到影响，标记越多，加载和缩放越慢）。

var marker = new google.maps.Marker({
  position: latlng,
  map: map,
  icon: {
    url: $marker.attr('data-marker'),
    scaledSize: new google.maps.Size(30, 30),
  }
});