Javascript 基于epoly多段线距离值循环隐藏/显示局部标记

Javascript 基于epoly多段线距离值循环隐藏/显示局部标记,javascript,json,google-maps-api-3,google-polyline,geoxml3,Javascript,Json,Google Maps Api 3,Google Polyline,Geoxml3,我制作了这个天线罗盘/地图,其中显示了从用户地理位置到广播公司位置标记的电视接收器天线正确定位的相关视线 它是一个居中的用户地理标记,用于将多段线绘制到相关的广播机标记。只有一个标记这么远 通过一系列表示广播覆盖范围(在数据库或大型JSON文件或geoxml中?)的标记位置和值进行循环,并根据其是否在距离用户静态距离的范围内隐藏/显示相关标记和多段线,理想的方法是什么?我将静态半径/距离称为“天线容量” 我在下面尝试过这一点,似乎很管用,但我想知道一种更传统的方法来处理整个北美的JSON位置数

我制作了这个天线罗盘/地图,其中显示了从用户地理位置到广播公司位置标记的电视接收器天线正确定位的相关视线

它是一个居中的用户地理标记,用于将多段线绘制到相关的广播机标记。只有一个标记这么远

通过一系列表示广播覆盖范围(在数据库或大型JSON文件或geoxml中?)的标记位置和值进行循环,并根据其是否在距离用户静态距离的范围内隐藏/显示相关标记和多段线,理想的方法是什么?我将静态半径/距离称为“天线容量”

我在下面尝试过这一点,似乎很管用,但我想知道一种更传统的方法来处理整个北美的JSON位置数组,因为让客户端遍历所有位置的每个多段线/标记来评估本地标记是否与显示相关是不有效的

var cblftdtLengh = (cblftdtLos.Distance() - cblftdtErp);

if (cblftdtLengh >= antennacapability) {cblftdtLos.setMap(map)};   
所以,如果广播者距离用户地理位置是x距离(这是多段线),广播者到达距离是y。。如果广播者覆盖范围小于或等于“天线容量”值,则不显示广播者标记

让我知道是否有一种最佳做法,用于显示/隐藏整个北美潜在1000个位置的位置数据

感谢所有人,我们非常感谢您的帮助

 function initialize() {
     var mapOptions = {
         zoom: 17,
         mapTypeId: google.maps.MapTypeId.ROADMAP

     };

    google.maps.visualRefresh=true;

     map = new google.maps.Map(document.getElementById('map-canvas'),


     mapOptions);




     //KML test?

     var myParser = new geoXML3.parser({map: map});
     myParser.parse('KML FILE NOT HERE YET');



     // Try HTML5 geolocation
     if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(function (position) {
             var myLatLng = new google.maps.LatLng(position.coords.latitude,
             position.coords.longitude);

             var antenna = {
                 path: 'M26.346,32.473 14.268,32.473 3.445,21.65 14.268,10.824 3.445,0 14.268,-10.822 3.445,-21.648 14.268,-32.473 26.346,-32.473M-26.346,32.473 -14.271,32.473 -3.443,21.65 -14.271,10.824 -3.443,0 -14.271,-10.822 -3.443,-21.648 -14.271,-32.473 -26.346,-32.473M-5.572,0 5.568, 0z',
                 scale: 1,
                 strokeColor: '#00AEEF',
                 strokeWeight: 3
             };


             var reciever = new google.maps.Marker({
                 position: myLatLng,
                 map: map,
                 icon: antenna

              });       



var antennacapability = 144840

var cblftdtErp = 96560

var cblftdtLogo = 'http://compass.klampwave.com/cbc.png';
var cblftdt = new google.maps.LatLng(43.6425, -79.387222);
var cblftdtmarker = new google.maps.Marker({
position: cblftdt,
icon: cblftdtLogo,
map: map
});
var cblftdtPath = [myLatLng, cblftdt];
var cblftdtSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 3,
fillOpacity: 1.0
};
var cblftdtLos = new google.maps.Polyline({
path: cblftdtPath,
icons: [{
    icon: cblftdtSymbol,
    offset: '110px'
}],
map: map,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});

var cblftdtLengh = (cblftdtLos.Distance() - cblftdtErp);

if (cblftdtLengh >= antennacapability) {cblftdtLos.setMap(map)};           


            map.setCenter(myLatLng);
         }, function () {
             handleNoGeolocation(true);
         });
     } else {
         // Browser doesn't support Geolocation
         handleNoGeolocation(false);
     }
 }


 function handleNoGeolocation(errorFlag) {
     if (errorFlag) {
         var content = 'Bummer, Geolocation failed.. </br> could be the connection, location access may be turned off, or it\'s an in-app browser on mobile. If so, copy web address with share feature, then paste into your legit browser.';
     } else {
         var content = 'Hmm, your browser doesn\'t support Geolocaiton. Maybe check for upgrades (to HTML5 browser) and swing back here after, cheers!';
     }

     var options = {
         map: map,
         position: new google.maps.LatLng(60, 105),
         content: content
     };


     var infowindow = new google.maps.InfoWindow(options);
     map.setCenter(options.position);
 }



 google.maps.event.addDomListener(window, 'load', initialize);
函数初始化(){
变量映射选项={
缩放:17,
mapTypeId:google.maps.mapTypeId.ROADMAP
};
google.maps.visualRefresh=true;
map=new google.maps.map(document.getElementById('map-canvas'),
地图选项);
//KML测试?
var myParser=new geoXML3.parser({map:map});
parse('KML文件还没有在这里');
//试试HTML5地理定位
if(导航器.地理位置){
navigator.geolocation.getCurrentPosition(函数(位置){
var myLatLng=new google.maps.LatLng(position.coords.latitude,
位置坐标经度);
无功天线={
路径:'M26.346,32.473 14.268,32.473.445,21.65 14.268,10.824 3.445,0 14.268,-10.822 3.445,-21.648 14.268,-32.473 26.346,-32.473-26.346,32.473-14.271,32.473-3.443,21.65-14.271,10.824-3.443,0-14.271,--10.822-3.443.443,0-21.648,--21.643-21.648-473-26.568,-.568,0-348'.348'',
比例:1,
strokeColor:“#00AEEF”,
冲程重量:3
};
var receiver=new google.maps.Marker({
职位:myLatLng,
地图:地图,
图标:天线
});       
var天线容量=144840
变量cblftdtErp=96560
var cblftdtLogo=http://compass.klampwave.com/cbc.png';
var cblftdt=newgoogle.maps.LatLng(43.6425,-79.387222);
var cblftdtmarker=新的google.maps.Marker({
职位:cblftdt,
图标:cblftdtLogo,
地图:地图
});
var cblftdtPath=[myLatLng,cblftdt];
变量cblftdtSymbol={
路径:google.maps.SymbolPath.FORWARD\u CLOSED\u箭头,
比例:3,
填充不透明度:1.0
};
var cblftdtLos=新的google.maps.Polyline({
路径:cblftdtPath,
图标:[{
图标:cblftdtSymbol,
偏移量:“110px”
}],
地图:地图,
strokeColor:#FF0000“,
笔划不透明度:1.0,
冲程重量:2
});
var cblftdtLengh=(cblftdtLos.Distance()-cblftdtErp);
if(cblftdtLengh>=天线容量){cblftdtLos.setMap(map)};
地图设置中心(myLatLng);
},函数(){
手持导航(真);
});
}否则{
//浏览器不支持地理位置
手动定位(假);
}
}
函数handleNogeLocation(errorFlag){
如果(错误标志){
var content='Bummer,地理位置失败。
可能是连接,位置访问可能已关闭,或者是移动设备上的应用程序内浏览器。如果是,请使用共享功能复制网址,然后粘贴到您的合法浏览器中。'; }否则{ var content='嗯,你的浏览器不支持Geolocaiton。也许可以检查升级(到HTML5浏览器),然后返回这里,干杯!'; } 变量选项={ 地图:地图, 职位:新google.maps.LatLng(60105), 内容:内容 }; var infowindow=new google.maps.infowindow(选项); 地图设置中心(选项位置); } google.maps.event.addDomListener(窗口“加载”,初始化);
问题是什么?你试图实现你的“要求”是什么?你是对的,还不清楚。。我将在上面编辑