为什么我在 Google 地图中使用 containsLocation 和 isLocationOnEdge 时会得到 false

Question

使用折线方法，我尝试使用 Google 地图 API 在桌面环境上的 Google 地图上绘制折线。如果我单击或将鼠标悬停在一行上，那么我想显示一个对话框，其中将显示该行的名称。当我单击该行时，我在应用程序中同时收到鼠标悬停和单击事件。但我无法迭代，因为 API 返回 false。你能给我一个提示，关于我做错了什么吗？这是代码。我想在对话框上显示名称属性。谢谢。

var g_infoWindow;
var g_curvePathArray;
var g_curvePathObjects = {};
var g_pathArray = [];
var g_pathObjects = {};

g_pathObjects['pipesegment_103'] = {
"coordinates": [
    { lat: 61.31904092678181, lng: 24.858185804137534 },
    { lat: 61.31913616518112, lng: 24.857952505746248 },
    { lat: 61.319173741447855, lng: 24.857381278784956 }
],
strokeColor: g_pipeFillColorNormal,
blockedAlarm: false,
postsuction: false,
suction: false,
name: "pipesegment_103"
};

g_pathObjects['pipesegment_49'] = {
"coordinates": [
    { lat: 61.319173741447855, lng: 24.857381278784956 },
    { lat: 61.318964199094346, lng: 24.856899615641428 }
],
strokeColor: g_pipeFillColorNormal,
blockedAlarm: false,
postsuction: false,
suction: false,
name: "pipesegment_49"
};

g_pathObjects['pipesegment_52'] = {
"coordinates": [

    { lat: 61.318964199094346, lng: 24.856899615641428 },
    { lat: 61.31897482431248, lng: 24.856266614313913 }
],
strokeColor: g_pipeFillColorNormal,
blockedAlarm: false,
postsuction: false,
suction: false,
name: "pipesegment_52"
};


for (var singlePath in g_pathObjects) {
    var populationOptions = {
    path: g_pathObjects[singlePath].coordinates,
    geodesic: true,
    strokeColor: g_pathObjects[singlePath].strokeColor,
    strokeOpacity: .8,
    strokeWeight: 5,
    name: g_pathObjects[singlePath].name
};

var myownpath = new google.maps.Polyline(populationOptions);
myownpath.setMap(g_map)
g_pathArray.push(myownpath);
google.maps.event.addListener(myownpath, 'click', function (e) {
    var locs = { lat: e.latLng.lat(), lng: e.latLng.lng() };
    var myPosition1 = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());

    for (var i = 0; i < g_pathArray.length; i++) {
        let b = google.maps.geometry.poly.containsLocation(myPosition1, g_pathArray[i]);

        if (google.maps.geometry.poly.isLocationOnEdge(myPosition1, g_pathArray[i], 0.0)) {
            g_infoWindow = new google.maps.InfoWindow({
                content: myownpath.name,
            });
            console.log('index isLocationOnEdge= ' + i);
            g_infoWindow.setPosition(locs);
            g_infoWindow.open(g_map);
            break;
        }
    }
});

google.maps.event.addListener(myownpath, 'mouseoverr', function (e) {
    var locs = { lat: e.latLng.lat(), lng: e.latLng.lng() };
    var myPosition1 = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
    for (var i = 0; i < g_pathArray.length; i++) {
        let b = google.maps.geometry.poly.containsLocation(e.latLng, g_pathArray[i]);
        if (google.maps.geometry.poly.isLocationOnEdge(myPosition1, g_pathArray[i])) {
            g_infoWindow = new google.maps.InfoWindow({
                content: g_pathArray[i].name,
            });
            g_infoWindow.setPosition(locs);
            g_infoWindow.open(g_map);
            break;
        }
    }

谢谢！

Answer 1

您遇到此问题是因为您在代码中使用了 google.maps.geometry.poly.containsLocation 和 google.maps.geometry.poly.isLocationOnEdge 函数，但这些函数用于检查多边形而不是折线。

我会建议您从使用 containsLocation 切换到专注于 isLocationOnEdge，这将适用于具有少量设置的折线。

此外，我可以看到您的代码中存在一个打字错误，即“mouseverr”，请将其更改为“mouseover”。

我重写了你的代码，只是检查它是否解决了你的查询。

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry"></script>
    <script>
    var g_infoWindow;
    var g_pathArray = [];
    var g_pathObjects = {};
    
    g_pathObjects['pipesegment_103'] = {
        "coordinates": [
            { lat: 61.31904092678181, lng: 24.858185804137534 },
            { lat: 61.31913616518112, lng: 24.857952505746248 },
            { lat: 61.319173741447855, lng: 24.857381278784956 }
        ],
        strokeColor: '#FF0000',
        name: "pipesegment_103"
    };
    
    g_pathObjects['pipesegment_49'] = {
        "coordinates": [
            { lat: 61.319173741447855, lng: 24.857381278784956 },
            { lat: 61.318964199094346, lng: 24.856899615641428 }
        ],
        strokeColor: '#00FF00',
        name: "pipesegment_49"
    };
    
    g_pathObjects['pipesegment_52'] = {
        "coordinates": [
            { lat: 61.318964199094346, lng: 24.856899615641428 },
            { lat: 61.31897482431248, lng: 24.856266614313913 }
        ],
        strokeColor: '#0000FF',
        name: "pipesegment_52"
    };
    
    function initMap() {
        var mapOptions = {
            center: { lat: 61.31904092678181, lng: 24.857952505746248 },
            zoom: 15
        };
        
        var g_map = new google.maps.Map(document.getElementById("map"), mapOptions);
    
        for (var singlePath in g_pathObjects) {
            var populationOptions = {
                path: g_pathObjects[singlePath].coordinates,
                geodesic: true,
                strokeColor: g_pathObjects[singlePath].strokeColor,
                strokeOpacity: 0.8,
                strokeWeight: 5,
                name: g_pathObjects[singlePath].name
            };
    
            var myownpath = new google.maps.Polyline(populationOptions);
            myownpath.setMap(g_map);
            g_pathArray.push(myownpath);
    
            google.maps.event.addListener(myownpath, 'click', function (e) {
                var locs = { lat: e.latLng.lat(), lng: e.latLng.lng() };
                var myPosition1 = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
    
                for (var i = 0; i < g_pathArray.length; i++) {
                    if (google.maps.geometry.poly.isLocationOnEdge(myPosition1, g_pathArray[i], 0.00001)) {
                        g_infoWindow = new google.maps.InfoWindow({
                            content: g_pathObjects[singlePath].name
                        });
                        g_infoWindow.setPosition(locs);
                        g_infoWindow.open(g_map);
                        break;
                    }
                }
            });
    
            google.maps.event.addListener(myownpath, 'mouseover', function (e) {
                var locs = { lat: e.latLng.lat(), lng: e.latLng.lng() };
                var myPosition1 = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
    
                for (var i = 0; i < g_pathArray.length; i++) {
                    if (google.maps.geometry.poly.isLocationOnEdge(myPosition1, g_pathArray[i], 0.00001)) {
                        g_infoWindow = new google.maps.InfoWindow({
                            content: g_pathObjects[singlePath].name
                        });
                        g_infoWindow.setPosition(locs);
                        g_infoWindow.open(g_map);
                        break;
                    }
                }
            });
        }
    }
    </script>
    
    <div id="map" style="height: 500px; width: 100%;"></div>

添加您的 API 密钥，如果不需要，请删除 . 我希望这能解决您的疑问。