堆栈内存溢出
  繁体   English   中英

如何比较几何视口从对象到地图活动窗口

[英]How to compare geometry viewport from object to map active window

 原文  2017-08-04 07:50:04  1   1    javascript/ google-maps-api-3

问题描述

我仅在对象上的geometry.viewport与地图窗口匹配时才尝试在地图上显示标记。

因此，我开始创建地图边界，并在拖动/缩放地图以显示标记（如果视口在地图窗口上匹配）时与geometry.viewport进行比较，但是我的标记没有显示。

比较地图边界与我对象的geometry.viewport是否可行？ 

 var map, infowindow, latlngbounds; var myData = { "results": [{ "ATM": [{ "geometry": { "location": { "lat": -6.187688000000001, "lng": 106.815248 }, "viewport": { "northeast": { "lat": -6.186168469708499, "lng": 106.8167501802915 }, "southwest": { "lat": -6.188866430291504, "lng": 106.8140522197085 } } }, "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/atm-71.png", "id": "a3accb50985678d7589f712fea5252ef0be7651a", "name": "Lippo Bank", "place_id": "ChIJC5p3Jp32aS4RNV2CNGY_bkI", "reference": "CmRRAAAAgSqsFrQBWNCZyAlRULRhSxUimo1oGOixfr-acHJA7-CcQZhHMzDUfy7YG1g7RKYiBe0owH-gRpq03Z_k_q6hzNX_-XZ6w-zbaoZitCLwRod_IHF6xDYcxb5r9o4oE_8wEhBdKhGKDev1-eD1h83BxEuPGhRbIJYGEzHEx8Efd8xYH29o6j6PaA", "scope": "GOOGLE", "types": ["atm", "finance", "point_of_interest", "establishment"], "vicinity": "Pasar Tanah Abang, Jalan Fachrudin No.5, Kampung Bali", "category": "atm" }, { "geometry": { "location": { "lat": -6.166333700000001, "lng": 106.8031611 }, "viewport": { "northeast": { "lat": -6.164964969708497, "lng": 106.8045088802915 }, "southwest": { "lat": -6.167662930291502, "lng": 106.8018109197085 } } }, "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/atm-71.png", "id": "a73fadf83bd003c0623aaa0cbdfc9ddb9412ba5d", "name": "BCA", "place_id": "ChIJtXHoeG_2aS4RG3yyAdj4ph4", "rating": 2, "reference": "CmRRAAAA8zCEbvfTRyBVHPTV64Den19_zYpUtWr4eEJED31xFn7Z6oXfUJwwSrJmYjZct8IofG60DLYDxk5uHXixHWNYSyuazzzLUnUpA3aTPXttYHaROfqvRBpC76Dd9OP60SVdEhBK3EeYj6DxyYjaqnwHTA1rGhSwe3IYepu-EPz3rVYzGejybdH2VA", "scope": "GOOGLE", "types": ["atm", "finance", "point_of_interest", "establishment"], "vicinity": "Jalan Kh. Hasyim Ashari No.Lt. Dasar, No., RW.8, Cideng", "category": "atm" }, { "geometry": { "location": { "lat": -6.16088, "lng": 106.83252 }, "viewport": { "northeast": { "lat": -6.159531019708498, "lng": 106.8338689802915 }, "southwest": { "lat": -6.162228980291502, "lng": 106.8311710197085 } } }, "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/atm-71.png", "id": "b2b350cf75380825292d35f17bdc5c0167b780c0", "name": "BCA", "place_id": "ChIJNTIagMT1aS4RfmpinPMUO9g", "rating": 5, "reference": "CmRSAAAAOisT3gDmVlNzyWdT1IMNLV2GnBd-KbbsnL0-OD16JdEjSJY_nQKDVWFNYXTDgRvoDB7IrWE6AOoTQc6_aVGC3vYWb_hGfTjfxtOsV_pdKcha_e0cBUeyNMqak20OXtLbEhCoSm_Sw-wqbfW0dXoxnFujGhSu-TW5gIJrJ-LNJUDmgw7HVwGfHQ", "scope": "GOOGLE", "types": ["atm", "finance", "point_of_interest", "establishment"], "vicinity": "Pasar Metro, Jl. Kh. Samanhudi No.Lt.1, RT.3/RW.6, Pasar Baru", "category": "atm" } ], "Restaurant": [{ "geometry": { "location": { "lat": -6.177284299999998, "lng": 106.800065 }, "viewport": { "northeast": { "lat": -6.175935319708497, "lng": 106.8014139802915 }, "southwest": { "lat": -6.178633280291501, "lng": 106.7987160197085 } } }, "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png", "id": "2bad9fd476e1f228888b12718a2b16688c239c9c", "name": "Domino's Pizza Indonesia", "opening_hours": { "open_now": true, "weekday_text": [] }, "photos": [{ "height": 2448, "html_attributions": [ "\Metta Pranata\" ], "photo_reference": "CmRaAAAA9_A-JNmp_F1pAfw1LfyQIzmbZ0CyEHAP85Bu6cVIpBZyOpjJf7r5jHLsaI4lI1JU-kUp6PSIGE3nelvcBbyibFHriRteg4T24cUy5cFfFXctazlvrkRJGWoUpp1fpYlCEhCF6Kqv_SyPan3ZQwlcsu2MGhSo7czKonbhbMpLFo49wqPGAnkPQA", "width": 3264 }], "place_id": "ChIJq7oXAIr2aS4RtPo-KxshLHQ", "price_level": 1, "rating": 4.1, "reference": "CmRRAAAAIPD7F3cb2jopx91PUhhqxpu4b8SNC8toZMp8IFZSsj2tjzv0fWogLIyx6GLrUIji7kC3i3zQSK99OEu9uZHuSurn0c6RZjhfHfOfFld89sWaGgoCjpckO99uTFBhzeUzEhBEYlvMHgNaYi1dcg0wGoaGGhQBPFeTSa_ejqXyAmJuuYL2f6c9nA", "scope": "GOOGLE", "types": [ "meal_delivery", "meal_takeaway", "restaurant", "food", "point_of_interest", "establishment" ], "vicinity": "Jalan Tomang Raya No. 32 Blok B11 Kav. 39, Jatipulo, Palmerah, RT.5/RW.1, Jatipulo", "category": "restaurant" }], "School": [{ "geometry": { "location": { "lat": -6.1795373, "lng": 106.7991026 }, "viewport": { "northeast": { "lat": -6.178036219708497, "lng": 106.8003758802915 }, "southwest": { "lat": -6.180734180291502, "lng": 106.7976779197085 } } }, "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/school-71.png", "id": "fbacddf46e05f548cbbfe0dc4ba670ad012a1218", "name": "Sekolah Dasar Negeri Jati Pulo 07 Pagi", "photos": [{ "height": 1440, "html_attributions": [ "\Gb Jkt\" ], "photo_reference": "CmRaAAAAfm0ln5twhqqMELlbZ2Jc2YGq5DvTOPZoXdy1Zop6lbeol_4uYjPnrK38k75DHIEL2zBIYMbm6Hgru2UBmDXRwUQFbH7kbFNSEHdZ6bWW8c9RfIb3ElKBn1hZY6F-yPEIEhCXy7avCBaVVULc4ngZa2fUGhTFzHdwiOgjejPYgf-QiV_d1bN75Q", "width": 2560 }], "place_id": "ChIJmdYuN4r2aS4RDUwPBrQtgyA", "rating": 4, "reference": "CmRRAAAAt7mhFoZeaukhSfR6MfkxDE5-_tgsqSFA_1LIOiiaYwyryetUsB4YAR-RaPhvU6-bh9XysOp0IFUFVQA8GEl06opmI_Mv08--56zbT0nKcFZ95f-4V3wApC1IlCqXluX8EhB0oI-9p5LqUM-8S5ohJAn9GhSjylq2coBRTkQ6iPqPlgyOw36VgA", "scope": "GOOGLE", "types": ["school", "point_of_interest", "establishment"], "vicinity": "Jalan Teratai No.17, RT.4/RW.1, Jatipulo", "category": "school" }, { "geometry": { "location": { "lat": -6.1812008, "lng": 106.7856261 }, "viewport": { "northeast": { "lat": -6.179857319708496, "lng": 106.7869020302915 }, "southwest": { "lat": -6.182555280291501, "lng": 106.7842040697085 } } }, "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/school-71.png", "id": "c2c219444c5a0ebe4a3cc3a1c7ba8aeac887fb94", "name": "Sekolah Dasar Negeri Tanjung Duren Selatan 05 Pagi", "place_id": "ChIJRabUAvf2aS4RH0yq3DzuydE", "rating": 4.2, "reference": "CmRSAAAAvG63rooM19T3RKVu_7c9yjj7_Ipzshl1OOUrnLKJZjgTyKb9GJrH1l62Ie9CQFN0BmZX_5KpSc0LoN46xLXy9k2GRP-6hWkWQwxJln4SKdMPNvFPnk6EhQ_3zyoYX6vHEhDZKLj8nSSQZRhYEqKSxLnsGhQrIDHxFabEN0KtvVM6DvkL_e6aDQ", "scope": "GOOGLE", "types": ["school", "point_of_interest", "establishment"], "vicinity": "Jalan Tanjung Duren Dalam IV No.26, RT.3/RW.3, Tanjung Duren Selatan", "category": "school" } ], "Convenience_Store": [{ "geometry": { "location": { "lat": -6.1675108, "lng": 106.7955641 }, "viewport": { "northeast": { "lat": -6.166144019708497, "lng": 106.7968599302915 }, "southwest": { "lat": -6.168841980291502, "lng": 106.7941619697085 } } }, "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/shopping-71.png", "id": "fdfd8c6c1f5381d1558b77010445c1bfb72b2ac0", "name": "Alfamart", "opening_hours": { "open_now": true, "weekday_text": [] }, "place_id": "ChIJN9dNcln2aS4RYSdYc1koi4w", "reference": "CmRSAAAA7ky5vQ0XtVUu8GEC7fuJUpmYc2cl3GiOspV6fQbPOggcUmopf1Ic0MqB658pBjcwWjuTDb7K3Errw4kyT08WbZJGoB-tZAz_DR3bWjaISERDUC2-O7ehXNsVpKevgyp2EhDuyH5Pur2itPZM92e5d6H-GhSZPYJLKH8aPfyKEgkZJBZX3vu-7g", "scope": "GOOGLE", "types": [ "convenience_store", "food", "store", "point_of_interest", "establishment" ], "vicinity": "Jalan Tawakal Raya RT.3/RW.9, Tomang", "category": "conveniencestore" }, { "geometry": { "location": { "lat": -6.1758259, "lng": 106.7981367 }, "viewport": { "northeast": { "lat": -6.174526069708498, "lng": 106.7995251802915 }, "southwest": { "lat": -6.177224030291502, "lng": 106.7968272197085 } } }, "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/shopping-71.png", "id": "ce03dfc58a9776220ba205c38d1957a9526b889a", "name": "Alfamart", "opening_hours": { "open_now": true, "weekday_text": [] }, "photos": [{ "height": 2940, "html_attributions": [ "\Bata Expose Indonesia\" ], "photo_reference": "CmRaAAAApDL_kUQ46OPPGLyRF_wU_o1HIXHMtith4KfzJ5d1Tu8qd8YgfjMq_haUN4qB8mYfF3JJP2GDCm_Xu-A1RwxwCywuv_ogUYuY4oSfbKINy1DQcYi7VoebjmhapSVrkHsiEhDNzI7lLqjUE-mf__uNx9pMGhSdi89tZBDuZyWl0qqc3leDXE0KMA", "width": 3920 }], "place_id": "ChIJT9oDuWH2aS4Rn8NUqTJCoXg", "rating": 5, "reference": "CmRRAAAArHa0QxrDI2b5UbQPrPbEYKjhj1BKdyg7zqmbX6Y4c13LSG-5rUz5kCZ_QqSPW9ZzczzdYMQ4b9PaJxt7el-yQgXmQork4kH33ctcKLVD-J3Mf873ET7ICne6qpY3AnTWEhDUY6jTBsnRcNHo4U-goOCUGhTDvd2WGmkZdtFQpfG3R4hdw13uQw", "scope": "GOOGLE", "types": [ "convenience_store", "food", "store", "point_of_interest", "establishment" ], "vicinity": "Jalan Gelong Baru, RT. 11/02, Tomang, Grogol petamburan, RT.11/RW.2, Tomang", "category": "conveniencestore" } ], "Shelter": [{ "geometry": { "location": { "lat": -6.165864, "lng": 106.790138 }, "viewport": { "northeast": { "lat": -6.164515019708498, "lng": 106.7914869802915 }, "southwest": { "lat": -6.167212980291502, "lng": 106.7887890197085 } } }, "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/bus-71.png", "id": "bee1b888faccd80390916b0db9eee48b23d97997", "name": "Kramat Djati. PT - Grogol", "place_id": "ChIJrXP6vkL2aS4RZzma9Io9SLU", "reference": "CmRSAAAATLmMwXMvt-4ETiEyVY0hCF60GDdinc_Da41B3WXy5w0TyQPDSewMSAVt9DRCGFoelfWi043QJOxDcoevR12exizcBpPWUtsZw7d0NGZg2I4hUHQy3gLXFBXNufcnKFweEhD5mNIc6BPjg3nPIaP0yr9oGhRMqcxj-MUhTuDS-bCask2Q0kRpDA", "scope": "GOOGLE", "types": [ "bus_station", "transit_station", "point_of_interest", "establishment" ], "vicinity": "JL. Doktor Susilo Raya No.16, Grogol - West Jakarta 11460", "category": "shelter" }] }] } function initMap() { // determine current location lat = -6.174241; lng = 106.798064; pyrmont = { lat: parseFloat(lat), lng: parseFloat(lng) }; // end map = new google.maps.Map($('#map')[0], { center: pyrmont, zoom: 16, scrollwheel: false }); marker = new google.maps.Marker({ map: map, position: { lat: parseFloat(lat), lng: parseFloat(lng) } }); latlngbounds = new google.maps.LatLngBounds(); google.maps.event.addListener(map, 'bounds_changed', function() { latlngbounds = map.getBounds(); ne = latlngbounds.getNorthEast(); sw = latlngbounds.getSouthWest(); $("#lat-north .value").html(ne.lat()); $("#lng-east .value").html(ne.lng()); $("#lat-south .value").html(sw.lat()); $("#lng-west .value").html(sw.lng()); //var neLat = $("#lat-north .value").html(ne.lat()).text(); $.each(myData.results, function(index, obj) { $.each(obj, function(idx, arr) { $.each(arr, function(key, val) { var myLatlng = new google.maps.LatLng(val.geometry.location); if (latlngbounds > val.geometry.viewport) { var marker = new google.maps.Marker({ position: myLatlng, map: map, icon: { url: val.icon, scaledSize: new google.maps.Size(30, 30) }, title: val.name }); return false; } else { return false; } }); }); }); }); } 
 #map { width: 400px; height: 400px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrFkA5CJ2KDHXX_DhTZMlqDAtvocKv3eg&libraries=places,geometry&callback=initMap" async defer></script> <div id="map"> </div> <div id="bound"> <div id="lat-north" class="line"> <div class="name">neLat</div> <div class="value"></div> </div> <div id="lng-east" class="line"> <div class="name">neLng</div> <div class="value"></div> </div> <div id="lat-south" class="line"> <div class="name">swLat</div> <div class="value"></div> </div> <div id="lng-west" class="line"> <div class="name">swLng</div> <div class="value"></div> </div> </div>

1 个解决方案

解决方案1
 1 已采纳  2017-08-04 09:32:57

是的，您可以使用LatLngBounds类 ，可能需要使用intersects方法。 像这样： 

google.maps.event.addListener(map, 'bounds_changed', function() {
    latlngbounds = map.getBounds();
    ne = latlngbounds.getNorthEast();
    sw = latlngbounds.getSouthWest();
    $("#lat-north .value").html(ne.lat());
    $("#lng-east .value").html(ne.lng());
    $("#lat-south .value").html(sw.lat());
    $("#lng-west .value").html(sw.lng());

    $.each(myData.results, function(index, obj) {
        $.each(obj, function(idx, arr) {
            $.each(arr, function(key, val) {
                var bounds = new google.maps.LatLngBounds(
                    val.geometry.viewport.southwest,
                    val.geometry.viewport.northeast
                );

                if (latlngbounds.intersects(bounds)) {
                    var marker = new google.maps.Marker({
                        position: val.geometry.location,
                        map: map,
                        icon: {
                            url: val.icon,
                            scaledSize: new google.maps.Size(30, 30)
                        },
                        title: val.name
                    });
                }
            });
        });
    });
});

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何从 OpenLayers 中获取地图的当前视口作为几何、边界框或 wkt？ 如何将窗口对象从活动选项卡发送到扩展名？ 如何确定javascript映射中的jquery对象在页面中是否仍处于活动状态？ 如何用地图旋转整个视口？ 如何从gltf对象获取几何体 Google会在地图视口外部打开v3信息窗口 停止地图隐藏视口之外的点 如何检查元素是否在视口中（div，无窗口） 如何获取窗口视口大小？ 在视口中如何在nextjs中映射大数据？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM