循环隐藏/显示基于epoly折线距离值的局部标记

时间:2014-04-24 18:48:27

标签: javascript json google-maps-api-3 google-polyline geoxml3

我制作了这个天线指南针/地图,显示了从用户地理位置到广播位置标记正确定位电视接收天线的相关视线。

http://compass.klampwave.com/map116.html

这是一个居中的用户地理标记,可以将折线绘制到相关的广播标记上。到目前为止只有一个标记。

循环遍历一系列标记位置和值的理想方法,这些位置和值代表广播器覆盖范围(在数据库或大型JSON文件或geoxml中?)并根据其是否在隐藏/显示相关标记和折线到达用户的静态距离?我称之为静态半径/距离'antennacapability'。

我在下面尝试了这个,看起来很有效,但是我想知道一种更传统的方法来为北美各地的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);

0 个答案:

没有答案