我想构建一个工具,使我可以在一定半径内搜索和定位数据库(经度和纬度用户)。 我已经有一个googlemaps API密钥。
是否有现成的工具或API?有任何提示或建议吗?
这是我的laravel代码,到目前为止,我已经获取了数据库用户作为地图中的标记。
#map {
height: 50%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="map"></div>
<script>
key=YOUR_API_KEY&libraries=places">
let users =; console.log(用户);
function initMap(){ var myLatLng = {lat:53.2193133,lng:6.5669632};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: myLatLng
});
var markers = [];
for (let i of users) {
markers.push(
new google.maps.Marker({
position: {lat: parseFloat(i.latitude), lng: parseFloat(i.longitude)},
map: map,
title: i
//hier wil ik eigelijk nog de naam van de gebruiker die vertoont wordt als je op de marker klikt.
}));
}
// var marker = new google.maps.Marker({
// position: myLatLng,
// map: map,
// title: 'Hello World!'
// });
// var marker2 = new google.maps.Marker({
// position: {lat: 53.2183133, lng: 6.5669632},
// map: map,
// title: 'Hello World!'
// });
// var myLatlng = new google.maps.LatLng(53.2193133,6.5669632);
// var mapOptions = {
// zoom: 4,
// center: myLatlng
// }
// // var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// // var marker = new google.maps.Marker({
// // position: myLatlng,
// // title:"Hello World!"
// });
}
//我正在考虑尝试将类似此功能的内容放入控制器
公共功能zoek(Request $ request){
$lat=$request ->lat;
$lng=$request ->lng;
$users=User::whereBetween('lat', [lat-0.05, lat+0.05]) ??
答案 0 :(得分:0)
我使用辅助线程,以便不会阻塞主线程,并且在有新的搜索条件集可用时,可以中断当前搜索。
在主线中,例如:-
function createFacilityMarkers(xmlhttp){
facFinder = new Worker("facfinder.js");
facFinder.addEventListener('message', workerInit, false);
facFinder.postMessage({'cmd' : 'init', 'load' : xmlhttp.responseText});
facfinder.js看起来像:-
importScripts("Tier3Toolbox.js");
var currVintage = 0;
var inBounds = false;
var facFilter = [];
var imageProlog = "<div style='height:5em; width:5em; display:inline-block;vertical-align:middle;'>" +
"<img style='height:100%; width: 100%; max-height:100%; max-width:100%' src='";
var imageEpilog = "' ></div>";
var facilityTable, lineBreak;
self.addEventListener('message', function(e)
{
var data = e.data;
switch (data.cmd) {
case 'init':
initThread(data.load);
break;
case 'initFilter':
for (var i=0; i<data.filterTable.length; i++) {
facFilter[data.filterTable[i].locTypeId] = {'icon':data.filterTable[i].icon};
}
break;
case 'filter':
facFilter = [];
for (var i=0; i<data.filterTable.length; i++) {
if (data.filterTable[i].facSelected)
facFilter[data.filterTable[i].locTypeId] = {'icon':data.filterTable[i].icon};
}
break;
case 'search':
var searchVintage = ++currVintage;
var tableSearch = new searcher(searchVintage, data);
break;
case 'reset':
reset();
self.postMessage({'reset': true});
break;
case 'stop':
self.postMessage({'success' : true});
self.close();
break;
default:
self.postMessage({'success' : false, 'msg' : data.msg});
};
}, false);
function initThread(msg)
{
facilityTable = JSON.parse(msg);
reset();
self.postMessage({'success' : true,
'cnt' : facilityTable.length
});
}
function reset()
{
for (var i=0; i<facilityTable.length; i++) {
facilityTable[i].visible=false
}
currVintage = 0;
}
function searcher(searchVintage, msg)
{
var myVintage = searchVintage;
var facIndex = -1;
var msg = msg;
var checkLoop = function()
{
if (myVintage != currVintage)
return;
if (++facIndex == facilityTable.length)
return;
inBounds = geoFencer.call(this, msg);
if (inBounds) {
var facMatch = 0;
var bubbleHTML = "";
for (var i=0; i<facilityTable[facIndex].facilities.length; i++){
var currFac = facilityTable[facIndex].facilities[i];
if (facFilter[currFac.locTypeId] != undefined) {
if (facMatch != 0) {
lineBreak = (facMatch / 3);
if (lineBreak == lineBreak.toFixed(0)) {
bubbleHTML += "<br />";
}
}
facMatch++;
bubbleHTML += imageProlog + facFilter[currFac.locTypeId].icon + imageEpilog;
}
}
if (facMatch == 0) {
inBounds = false;
}
}
if (inBounds != facilityTable[facIndex].visible) {
self.postMessage({'match' : inBounds,
'facIndex' : facIndex,
'scopeVintage': msg.scopeVintage,
'bubbleHTML' : bubbleHTML,
'success' : true
});
facilityTable[facIndex].visible = inBounds;
}
setTimeout(checkLoop,0);
}
var circleCheck = function(msg)
{
var diff = Tier3Toolbox.calculateDistance(
msg.centerLat,
msg.centerLng,
facilityTable[facIndex].searchLat,
facilityTable[facIndex].searchLng);
if (msg.radius > diff)
return true;
return false;
}
var rectangleCheck = function(msg)
{
if (facilityTable[facIndex].searchLat > msg.SWLat &&
facilityTable[facIndex].searchLat < msg.NELat &&
facilityTable[facIndex].searchLng > msg.SWLng &&
facilityTable[facIndex].searchLng < msg.NELng)
return true;
return false;
}
var GEOFENCER = [circleCheck,rectangleCheck];
var geoFencer = GEOFENCER[msg.checker];
setTimeout(checkLoop,0);
return this;
}
calculateDistance函数是:-
Tier3Toolbox.calculateDistance =
function(lat1, lon1, lat2, lon2){
var dLat = this.toRad(lat2 - lat1);
var dLon = this.toRad(lon2 - lon1);
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(this.toRad(lat1)) *
Math.cos(this.toRad(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
var distance = this.EARTH_RADIUS * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
return distance;
}