问题描述
我正在创建一个移动应用程序，其中用户（客户）会看到多个距离用户当前位置30kms范围内的驾驶员标记。
我是能够显示多个标记，这些标记通过使用JSON和JQuery存储在数据库中。
函数multimarker（地图）
{
jQuery.ajax（{
url：baseurl +getdriverlocation.php，
类型：JSON，
async：true，
成功：函数（数据）{
var myArray = jQuery.parseJSON（data）; //而不是JSON.parse（data）
jQuery（myArray）.each（function（index，element）{
driverlat = element.driver_lat;
driverlng = element。 driver_lng;
locations.push（[driverlat，driverlng]）
}）;
var bounds = new google.maps.LatLngBounds（）;
for（i = 0; i < locations.length; i ++）
{
var latlng1 = new google.maps.LatLng（locations [i] [0]，locations [i] [1]）;
drivermarker = new google.maps.Marker（{position：latlng1}）;
drivermarker.setMap（map）;
var infowindow = new google.maps.InfoWindow（）;
google .maps.event.addLis tener（drivermarker，'click'，（function（marker，i）{
return function（）{
infowindow.setContent（locations [i] [0]）;
infowindow.open（map，drivermarker）;
$ b}）（drivermarker，i））;
bounds.extend（latlng1）;
}
map.fitBounds（bounds）;
}
}）;
}
也可以在同一张地图上绘制当前位置如果（navigator.geolocation）{ 现在我只想显示那些是距离当前位置30公里。 否则不会显示。 如何操作？ 只有符合条件的标记才会添加到地图中。请确保包含。
函数currentpostionmap（）
{
函数成功（pos）
{
var latlng =新google.maps.LatLng（pos.coords.latitude，pos.coords.longitude）;
var myOptions = {
zoom：15，
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map（document.getElementById（map），myOptions）;
var image123 ='https：///developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
marker = new google.maps.Marker（{
position：latlng，
map：map，
icon：image123
} ）;
multimarker（地图）;
函数失败（错误）{
var latlng = new google.maps.LatLng（18.5204，73.8567）;
var myOptions = {
zoom：10，
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map（document.getElementById（map），myOptions）;
marker = new google.maps.Marker（{
position：latlng，
map：map
}）;
}
//找到用户当前位置。缓存位置5分钟，6秒后超时
navigator.geolocation.getCurrentPosition（success，fail，{maximumAge：500000，enableHighAccuracy：true，timeout：6000}）;
$ / code>
$对于（i = 0; i< locations.length; i ++）{
var latlng1 = new google.maps.LatLng（locations [i] [i]），b $ b
0]，位置[i] [1]）;
if（google.maps.geometry.spherical.computeDistanceBetween（latlng1，map.getCenter（））< 30000）{
drivermarker = new google.maps.Marker（{position：latlng1}）;
drivermarker.setMap（map）;
var infowindow = new google.maps.InfoWindow（）;
google.maps.event.addListener（drivermarker，'click'，（function（marker，i）{
return function（）{
infowindow.setContent（locations [i] [0] ）;
infowindow.open（map，drivermarker）;
}
}）（drivermarker，i））;
bounds.extend（latlng1）;
}
}
map.fitBounds（bounds）;
I am creating an Mobile App where user(customer) will see multiple markers of drivers who is on the 30kms of range from the users current position.
I am able to display multi markers, which are stored in the database by using JSON and JQuery.
function multimarker(map)
{
jQuery.ajax({
url: baseurl + "getdriverlocation.php",
type: "JSON",
async: true,
success: function(data){
var myArray = jQuery.parseJSON(data);// instead of JSON.parse(data)
jQuery(myArray).each(function( index, element ) {
driverlat = element.driver_lat;
driverlng = element.driver_lng;
locations.push([driverlat , driverlng])
});
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++)
{
var latlng1 = new google.maps.LatLng(locations[i][0], locations[i][1]);
drivermarker=new google.maps.Marker({position:latlng1});
drivermarker.setMap(map);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(drivermarker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, drivermarker);
}
})(drivermarker, i));
bounds.extend(latlng1);
}
map.fitBounds(bounds);
}
});
}
also able to plot current position on the same map
function currentpostionmap()
{
if ( navigator.geolocation ) {
function success(pos)
{
var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var image123 = 'https:///developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image123
});
multimarker(map);
}
function fail(error) {
var latlng = new google.maps.LatLng(18.5204, 73.8567);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
marker = new google.maps.Marker({
position: latlng,
map: map
});
}
// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
}
}
Now I just want to display only those marker which are at the distance of 30km from the current position.
Else will not be displayed.
How to do it?
Only add the markers to the map if they meet your criteria. Be sure to include the geometry library.
for (i = 0; i < locations.length; i++) {
var latlng1 = new google.maps.LatLng(locations[i][0], locations[i][1]);
if (google.maps.geometry.spherical.computeDistanceBetween(latlng1,map.getCenter()) < 30000) {
drivermarker=new google.maps.Marker({position:latlng1});
drivermarker.setMap(map);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(drivermarker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, drivermarker);
}
})(drivermarker, i));
bounds.extend(latlng1);
}
}
map.fitBounds(bounds);
这篇关于在距离30kms范围内的用户当前位置显示Google Map API JS V3中最近的多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！