Javascript 如何在与nestigator.com类似的rails应用程序中在google地图上设置多个标记?
我的应用程序有问题。我无法从通过地理编码保存的数据库中获取经度和纬度,我想在一张地图上制作一张包含数据库数据中所有标记的地图。 我需要问一下,如何在谷歌地图上有多个标记,其中包含rails应用程序中半径为10英里的位置的所有标记,有点类似于nestigator.com? 请帮助我,因为我已经尝试了很多事情,但没有成功。 这是我的视图文件的代码Javascript 如何在与nestigator.com类似的rails应用程序中在google地图上设置多个标记?,javascript,google-maps,Javascript,Google Maps,我的应用程序有问题。我无法从通过地理编码保存的数据库中获取经度和纬度,我想在一张地图上制作一张包含数据库数据中所有标记的地图。 我需要问一下,如何在谷歌地图上有多个标记,其中包含rails应用程序中半径为10英里的位置的所有标记,有点类似于nestigator.com? 请帮助我,因为我已经尝试了很多事情,但没有成功。 这是我的视图文件的代码 <!--show.html.erb--> <!DOCTYPE html> <html> <head>
<!--show.html.erb-->
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=Init&sensor=false"></script> <!-- Google Maps API -->
<script>
enter code here
function Init()
{
var map; // Google map object
// Create a Google coordinate object for where to initially center the map
var latlng = new google.maps.LatLng( <%= @location.latitude %>,<%= @location.longitude %> ); // Washington, DC
// Map options for how to display the Google map
var mapOptions = { zoom: 14, center: latlng };
// Show the Google map in the div with the attribute id 'map-canvas'.
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
marker = new google.maps.Marker({
map:map,
draggable: true,
position: latlng,
title: '<%= @location.address %>',
animation: google.maps.Animation.DROP,
});
marker.setMap(map);
}
// Update the Google map for the user's inputted address
function UpdateMap( )
{
var geocoder = new google.maps.Geocoder(); // instantiate a geocoder object
// Get the user's inputted address
var address = document.getElementById( "address" ).value;
// Make asynchronous call to Google geocoding API
geocoder.geocode( { 'address': address }, function(results, status) {
var addr_type = results[0].types[0]; // type of address inputted that was geocoded
if ( status == google.maps.GeocoderStatus.OK )
ShowLocation( results[0].geometry.location, address, addr_type );
else
alert("Geocode was not successful for the following reason: " + status);
});
}
// Show the location (address) on the map.
function ShowLocation( latlng, address, addr_type )
{
// Center the map at the specified location
map.setCenter( latlng );
// Set the zoom level according to the address level of detail the user specified
var zoom = 12;
switch ( addr_type )
{
case "administrative_area_level_1" : zoom = 6; break; // user specified a state
case "locality" : zoom = 10; break; // user specified a city/town
case "street_address" : zoom = 16; break; // user specified a street address
}
map.setZoom( zoom );
// Place a Google Marker at the same location as the map center
// When you hover over the marker, it will display the title
var marker = new google.maps.Marker( {
position: latlng,
map: map,
title: address
});
// Create an InfoWindow for the marker
var contentString = "" + address + ""; // HTML text to display in the InfoWindow
var infowindow = new google.maps.InfoWindow( { content: contentString } );
// Set event to display the InfoWindow anchored to the marker when the marker is clicked.
google.maps.event.addListener( marker, 'click', function() { infowindow.open( map, marker ); });
}
// Call the method 'Init()' to display the google map when the web page is displayed ( load event )
google.maps.event.addDomListener( window, 'load', Init );
</script>
<style>
/* style settings for Google map */
#map-canvas
{
width : 600px; /* map width */
height: 400px; /* map height */
}
</style>
</head>
<body>
<br>
<!-- Dislay Google map here -->
<br/>
<h5><b>Search:</b></h5>
<div class="row">
<div class="col-md-5">
<input type="text" id="address" class="form-control" style="width:480px;"/>
</div>
<div class="col-md-4">
<button onclick="UpdateMap()" class="btn btn-primary">Locate</button>
</div>
</div>
<br>
<h3><%= @location.address %></h3><h6 id="notice"><%= notice %></h6>
<div class="row">
<div class="col-md-7">
<div id='map-canvas'></div>
</div>
<div class="col-md-5">
<h3>Nearby locations</h3>
<ul>
<% for location in @location.nearbys(10) %>
<li><%= link_to location.address, location %> (<%= location.distance.round(2) %> miles)</li>
<% end %>
<br>
<%= link_to 'Edit', edit_location_path(@location) %> |
<%= link_to 'Back', locations_path %>
</ul>
</div>
<br>
</div>
</body>
</html>
在这里输入代码
函数Init()
{
var-map;//谷歌地图对象
//创建一个Google坐标对象,用于最初将地图居中的位置
var latlng=new google.maps.latlng(,);//华盛顿特区
//如何显示谷歌地图的地图选项
var mapOptions={zoom:14,center:latlng};
//在div中显示属性id为“map canvas”的Google地图。
map=new google.maps.map(document.getElementById('map-canvas'),mapOptions);
marker=新的google.maps.marker({
地图:地图,
真的,
位置:latlng,
标题:“”,
动画:google.maps.animation.DROP,
});
marker.setMap(map);
}
//更新用户输入地址的谷歌地图
函数UpdateMap()
{
var geocoder=new google.maps.geocoder();//实例化一个geocoder对象
//获取用户输入的地址
var address=document.getElementById(“地址”).value;
//对Google地理编码API进行异步调用
geocoder.geocode({'address':address},函数(结果,状态){
var addr_type=results[0]。类型[0];//输入的地址类型,按地理编码
if(status==google.maps.GeocoderStatus.OK)
ShowLocation(结果[0]。几何体。位置,地址,地址类型);
其他的
警报(“地理编码因以下原因未成功:“+状态”);
});
}
//在地图上显示位置(地址)。
功能显示位置(板条、地址、地址类型)
{
//将地图居中放置在指定位置
地图设置中心(latlng);
//根据用户指定的详细地址级别设置缩放级别
var=12;
开关(地址类型)
{
case“administration\u area\u level\u 1”:zoom=6;break;//用户指定了一个状态
大小写“Location”:zoom=10;break;//用户指定了一个城市/城镇
案例“street_address”:zoom=16;break;//用户指定了一个街道地址
}
map.setZoom(缩放);
//将谷歌标记放置在与地图中心相同的位置
//当您将鼠标悬停在标记上时,它将显示标题
var marker=new google.maps.marker({
位置:latlng,
地图:地图,
标题:地址
});
//为标记创建一个信息窗口
var contentString=“”+address+”;//要在信息窗口中显示的HTML文本
var infowindow=new google.maps.infowindow({content:contentString});
//Set event可在单击标记时显示定位到标记的信息窗口。
google.maps.event.addListener(标记,'click',function(){infowindow.open(映射,标记);});
}
//调用方法“Init()”在显示网页时显示google地图(加载事件)
google.maps.event.addDomListener(窗口'load',Init);
/*谷歌地图的样式设置*/
#地图画布
{
宽度:600px;/*贴图宽度*/
高度:400px;/*地图高度*/
}
搜索:
定位
附近地点
- (英里)
|
如果我理解正确,你将输入一个位置坐标,并在地图上看到已知距离的地方
所以首先你需要写一个函数来计算距离,如果这个函数如果距离是你想要的,那么返回函数的result1,然后你将在一个循环中使用这个函数,你从数据库控件中获取数据,如果结果是,那么首先将你的标记作为数组,然后在for循环中创建你的标记
function calcCrow(lat1, lon1, lat2, lon2)
{
var R = 6371; // km
var dLat = toRad(lat2-lat1);
var dLon = toRad(lon2-lon1);
var lat1 = toRad(lat1);
var lat2 = toRad(lat2);
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
return d;
}
// Converts numeric degrees to radians
function toRad(Value)
{
return Value * Math.PI / 180;
}
这是计算的一个例子。
在for循环中,u可以使用if语句进行控制,如
if(caLCROW<2000){create your markers}
if(caLCROW