Question

使用google maps API，我的地图上有一些关闭标记，这些标记是自定义图标。每个标记的大小为41px x 50px，但每个标记的可点击区域为200px x 200px。 Screenshot of map with marker and it's clickable area

以下是创建标记的代码：

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属性来更改它，但是他们什么也没做。

有什么办法可以减小可点击区域的大小？

Answer 1

根据我的经验，我建议您创建png格式的图标，这些图标会根据显示地图的设备自动缩放。另外，我所做的事情是一次真正的大屠杀，您应该创建一个标记原型，并根据地图的当前缩放比例通过代码对其进行缩放。

一个侧面考虑：由于您的标记与默认标记没有太大区别，因此请查看Google或以下网站已提供的标记：An icon font for use with Google Maps API and Google Places API using SVG markers and icon labels。有时我曾经使用过它们，但最后我还是更喜欢用Photoshop自定义或修改的自己的图标。

Answer 2

我不知道您如何使用地图，但是最近我做了这样的事情：

    // 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();
    }

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

现在我找不到它，但是我还有一个应用程序，该应用程序具有不同的动画和图标以可视化更好的警报。最后，我发现它是一种简单的方法。正如我之前说过的，在放大的地图上查看汽车的形状和实时动画，这真是一场大屠杀。

Google Map Marker可点击区域太大

2 个答案: