Слишком большая кликабельная область Google Map Marker

Question

Используя API карт Google, у меня есть карта с несколькими маркерами закрытия, которые являются пользовательскими значками.Каждый маркер имеет размер 41 на 50 пикселей, но кликабельная область для каждого составляет 200 на 200 пикселей. Снимок экрана карты с маркером и его интерактивной областью

Вот код, который создает маркеры:

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

Я не знаю, как вы используете карту, но недавно я сделал что-то вроде этого:

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

Теперь я не нахожу их, но у меня также есть приложение, которое имеет различные анимации и значки для визуализации лучших сигналов тревоги.,В конце я нахожу это простым подходом.Как я уже говорил, просматривал формы и анимацию автомобилей в режиме реального времени на карте, изменяя масштаб, и это была настоящая кровавая баня.

Answer 2

Исходя из моего опыта, я предлагаю вам создавать значки в формате png, которые автоматически масштабируются в зависимости от устройства, на котором отображается карта.В качестве альтернативы, то, что я сделал, и это была настоящая кровавая баня, вы должны создать прототип маркера и масштабировать его из кода на основе текущего масштаба карты.

Дополнительное соображение: поскольку ваши маркеры не сильно отличаются отПо умолчанию посмотрите на те, которые уже предоставлены Google или этим сайтом: Шрифт значков для использования с Google Maps API и Google Places API с использованием маркеров SVG и ярлыков значков .Я использовал их иногда, но в конце я все же предпочитаю свои собственные значки, сделанные на заказ или измененные с помощью Photoshop.