Javascript 如何在与nestigator.com类似的rails应用程序中在google地图上设置多个标记？_Javascript_Google Maps

Javascript 如何在与nestigator.com类似的rails应用程序中在google地图上设置多个标记？

javascript google-maps

Javascript 如何在与nestigator.com类似的rails应用程序中在google地图上设置多个标记？,javascript,google-maps,Javascript,Google Maps,我的应用程序有问题。我无法从通过地理编码保存的数据库中获取经度和纬度，我想在一张地图上制作一张包含数据库数据中所有标记的地图。我需要问一下，如何在谷歌地图上有多个标记，其中包含rails应用程序中半径为10英里的位置的所有标记，有点类似于nestigator.com？请帮助我，因为我已经尝试了很多事情，但没有成功。这是我的视图文件的代码  <!DOCTYPE html> <html> <head>

我的应用程序有问题。我无法从通过地理编码保存的数据库中获取经度和纬度，我想在一张地图上制作一张包含数据库数据中所有标记的地图。我需要问一下，如何在谷歌地图上有多个标记，其中包含rails应用程序中半径为10英里的位置的所有标记，有点类似于nestigator.com？请帮助我，因为我已经尝试了很多事情，但没有成功。这是我的视图文件的代码

<!--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