我制作了这个天线指南针/地图,它显示了相关的视线,以便将电视接收器天线从用户地理位置正确定位到广播公司位置标记。
http://compass.klampwave.com/map116.html
它是一个用户地理标记,居中,它为相关的广播公司标记绘制一条折线。到目前为止只有一个标记。
什么是理想的方法来遍历一组标记位置和值,这些标记位置和值代表广播公司的范围(在数据库或大型 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);