Javascript 谷歌地图标记可点击区域太大

使用GoogleMapsAPI，我有一个带有一些自定义图标的闭合标记的地图。 每个标记是41px乘50px，但每个标记的可点击区域是200px乘200px。

以下是创建标记的代码：

new google.maps.Marker({
        map: map,
        position: pos,
        tags: tags,
        id: id,
        animation: google.maps.Animation.DROP,
        icon: {
            path: 'M2.82467,37.476c.52516,1.27507,1.1015,2.54515,1.7189,3.80431.78478,1.6005,1.63589,3.18336,2.53256,4.73642S8.915,49.093,9.882,50.57435A141.80266,141.80266,0,0,0,27.20482,71.85121c.00036-.00035,17.10761-16.70763,24.38424-34.37524a34.60259,34.60259,0,0,0,1.82468-10.35353A26.17876,26.17876,0,0,0,27.20891,1.00018V1l-.002.00009L27.20482,1v.00018A26.17876,26.17876,0,0,0,1,27.12244m9.00957.23264a17.17136,17.17136,0,1,1,2.13034,8.304',
            fillOpacity: 1,
            fillColor: iconFill,
            strokeColor: iconStroke,
            strokeWeight: 2,
            scale: 0.7,
            size: new google.maps.Size(41, 50),
            scaledSize: new google.maps.Size(41, 50),
            anchor: {
                x: 25,
                y: 75
            }
        }
    })

我曾尝试使用

size

和

scaledSize

属性来更改它，但它们什么也没做

---

有没有办法缩小可点击区域的大小？

根据我的经验，我建议您创建png格式的图标，这些图标会根据地图显示的设备自动缩放。 或者，我所做的是一场真正的大屠杀，您应该创建一个标记原型，并根据当前地图的缩放比例从代码中缩放它

---

附带考虑：由于您的标记与默认标记没有太大差异，请查看Google或本网站已提供的标记：。我有时会使用它们，但最后我还是喜欢用Photoshop定制或修改我自己的图标。

根据我的经验，我建议你创建png格式的图标，它会根据地图显示的设备自动缩放。 或者，我所做的是一场真正的大屠杀，您应该创建一个标记原型，并根据当前地图的缩放比例从代码中缩放它

---

附带考虑：由于您的标记与默认标记没有太大差异，请查看Google或本网站已提供的标记：。我有时会使用它们，但最后我还是喜欢用Photoshop定制或修改我自己的图标。

我不知道你是如何使用地图的，但我最近做了类似的事情：

    // GET: Mappa
    public ActionResult Map()
    {
        // get fontane
        Fontane[] fontane = db.Fontane.ToArray();
        // prepare json string
        string markers = "[";
        // loop fontane
        for (int i = 0; i < fontane.Count(); i++)
        {
            markers += "{";
            // id
            markers += string.Format("\"fId\": \"{0}\",", fontane[i].FontanaID);
            // name
            markers += string.Format("\"title\": \"{0}\",", fontane[i].Nome);
            // position
            markers += string.Format("\"lat\": \"{0}\"", fontane[i].Latitudine).Replace(",", ".") + ",";
            markers += string.Format("\"lng\": \"{0}\"", fontane[i].Longitudine).Replace(",", ".") + ",";
            // icon
            string fIcon =  fontane[i].Active == true ? 
                (fontane[i].Allarme == true ? "/Content/icons/fontana_R.png" : "/Content/icons/fontana_G.png") : 
                "/Content/icons/fontana_W.png";
            // icon
            markers += string.Format("\"icon\": \"{0}\"", fIcon);
            markers += "},";
        }
        markers += "];";

        ViewBag.Markers = markers;
        return View();
    }

//获取：Mappa
公共行动结果图（）
{
//去方檀
Fontane[]Fontane=db.Fontane.ToArray（）；
//准备json字符串
字符串标记=“[”；
//环方
对于（int i=0；i

在MVC控制器中。正如你所看到的，我正在选择图标，然后再将它们发送到视图

@model Presidium.Models.Fontane
@{
ViewBag.Title = "Map";
}


<div id="gMap" style="height:100vh;width:100vw;"></div>

<script>
    let markers = @Html.Raw(ViewBag.Markers);
    window.onload = function () {
        let mapOptions = {
            center: new google.maps.LatLng(41.893140, 12.483330),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.SATELLITE,
            scrollwheel: true,
            draggable: true
        };
        let map = new google.maps.Map(document.getElementById("gMap"), mapOptions);
        for (i = 0; i < markers.length; i++) {
            let data = markers[i]
            let fLatLng = new google.maps.LatLng(data.lat, data.lng);

            let marker = new google.maps.Marker({
                position: fLatLng,
                map: map,
                title: data.title,
                icon: data.icon
            });
            map.setTilt(0);
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    let url = "/Fontane/Details/" + data.fId;
                    window.location.href = url; 
                });
            })
            (marker, data);
        }
    }


</script>

@model Presidium.Models.Fontane
@{
ViewBag.Title=“地图”；
}
让markers=@Html.Raw（ViewBag.markers）；
window.onload=函数（）{
让mapOptions={
中心：新google.maps.LatLng（41.893140,12.483330），
缩放：15，
mapTypeId:google.maps.mapTypeId.SATELLITE，
滚轮：对，
德拉格布尔：是的
};
让map=new google.maps.map（document.getElementById（“gMap”），mapOptions）；
对于（i=0；i

现在我没有找到它，但我还有一个应用程序，它有不同的动画和图标，可以更好地显示报警。 最后，我发现这是一个简单的方法。

---

正如我之前所说，我在地图上浏览了汽车在缩放时的形状和实时动画，这真是一场血战。

我不知道你是如何使用地图的，但我最近做了类似的事情：

    // GET: Mappa
    public ActionResult Map()
    {
        // get fontane
        Fontane[] fontane = db.Fontane.ToArray();
        // prepare json string
        string markers = "[";
        // loop fontane
        for (int i = 0; i < fontane.Count(); i++)
        {
            markers += "{";
            // id
            markers += string.Format("\"fId\": \"{0}\",", fontane[i].FontanaID);
            // name
            markers += string.Format("\"title\": \"{0}\",", fontane[i].Nome);
            // position
            markers += string.Format("\"lat\": \"{0}\"", fontane[i].Latitudine).Replace(",", ".") + ",";
            markers += string.Format("\"lng\": \"{0}\"", fontane[i].Longitudine).Replace(",", ".") + ",";
            // icon
            string fIcon =  fontane[i].Active == true ? 
                (fontane[i].Allarme == true ? "/Content/icons/fontana_R.png" : "/Content/icons/fontana_G.png") : 
                "/Content/icons/fontana_W.png";
            // icon
            markers += string.Format("\"icon\": \"{0}\"", fIcon);
            markers += "},";
        }
        markers += "];";

        ViewBag.Markers = markers;
        return View();
    }

//获取：Mappa
公共行动结果图（）
{
//去方檀
Fontane[]Fontane=db.Fontane.ToArray（）；
//准备json字符串
字符串标记=“[”；
//环方
对于（int i=0；i

在MVC控制器中。正如你所看到的，我正在选择图标，然后再将它们发送到视图

@model Presidium.Models.Fontane
@{
ViewBag.Title = "Map";
}


<div id="gMap" style="height:100vh;width:100vw;"></div>

<script>
    let markers = @Html.Raw(ViewBag.Markers);
    window.onload = function () {
        let mapOptions = {
            center: new google.maps.LatLng(41.893140, 12.483330),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.SATELLITE,
            scrollwheel: true,
            draggable: true
        };
        let map = new google.maps.Map(document.getElementById("gMap"), mapOptions);
        for (i = 0; i < markers.length; i++) {
            let data = markers[i]
            let fLatLng = new google.maps.LatLng(data.lat, data.lng);

            let marker = new google.maps.Marker({
                position: fLatLng,
                map: map,
                title: data.title,
                icon: data.icon
            });
            map.setTilt(0);
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    let url = "/Fontane/Details/" + data.fId;
                    window.location.href = url; 
                });
            })
            (marker, data);
        }
    }


</script>

@model Presidium.Models.Fontane
@{
ViewBag.Title=“地图”；
}
让markers=@Html.Raw（ViewBag.markers）；
window.onload=函数（）{