javascript - 将城市/州从 SQL Server 加载到 Google map ?

标签 javascript sql-server google-maps coldfusion geocoding

我正在尝试制作一个小型应用程序,该应用程序采用城市和州并对地址进行地理编码以定位到纬度/经度位置。现在我正在使用 Google Map 的 API、ColdFusion 和 SQL Server。基本上,城市和州字段在数据库表中,我想获取这些位置并在 Google map 上放置标记以显示它们的位置。

这是我进行地理编码的代码,查看页面的源代码显示它正确地循环了我的查询并在地址字段中放置了一个位置(“Omaha, NE”),但没有标记或 map 就此而言,显示在页面上:

function codeAddress() {
<cfloop query="GetLocations">
    var address = document.getElementById(<cfoutput>#Trim(hometown)#,#Trim(state)#</cfoutput>).value;
      if (geocoder) {
         geocoder.geocode( {<cfoutput>#Trim(hometown)#,#Trim(state)#</cfoutput>: address}, function(results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
             var marker = new google.maps.Marker({
             map: map, 
             position: results[0].geometry.location,
             title: <cfoutput>#Trim(hometown)#,#Trim(state)#</cfoutput>
             });
         } else {
            alert("Geocode was not successful for the following reason: " + status);
            }
         });
      }     
</cfloop> }

下面是初始化 map 的代码:

var geocoder;
var map;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(42.4167,-90.4290);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          title: "Test"
      });
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

我确实有一张使用硬编码到数据库表中的纬度/经度的 map ,但我希望能够只使用城市/州并将其转换为纬度/经度。有什么建议或方向吗?也可以在数据库中存储纬度/经度,但我不知道如何在 SQL 中执行此操作。

最佳答案

您可能需要考虑以下示例:

使用 V2 API :

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
  <title>Google Maps API Geocoding Demo</title> 
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
          type="text/javascript"></script> 
</head> 
<body onunload="GUnload()"> 

  <div id="map_canvas" style="width: 400px; height: 300px"></div> 

  <script type="text/javascript"> 

    // Prepare this list from ColdFusion
    var locations = [
       'New York, NY',
       'Los Angeles, CA',
       'Chicago, IL',
       'Houston, TX',
       'Phoenix, AZ'
    ];

    if (GBrowserIsCompatible()) {
       var map = new GMap2(document.getElementById("map_canvas"));

       var geocoder = new GClientGeocoder();
       var index = 0;

       var geocoderFunction = function () { 
          geocoder.getLatLng(locations[index], function (point) {    
             if (point) {
                map.addOverlay(new GMarker(point));                
             }

             // Call the geocoder with a 100ms delay
             index++;
             if (locations.length > index) {
                setTimeout(geocoderFunction, 100);
             }
          });
       }

       map.setCenter(new GLatLng(38.00, -100.00), 3);

       // Launch the geocoding process
       geocoderFunction();
    }
  </script> 
</body>
</html>

使用 V3 API :

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
  <title>Google Maps API Geocoding Demo</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body> 

  <div id="map_canvas" style="width: 400px; height: 300px"></div> 

  <script type="text/javascript"> 

    // Prepare this list from ColdFusion
    var locations = [
       'New York, NY',
       'Los Angeles, CA',
       'Chicago, IL',
       'Houston, TX',
       'Phoenix, AZ'
    ];

    var mapOpt = { 
       mapTypeId: google.maps.MapTypeId.TERRAIN,
       center: new google.maps.LatLng(38.00, -100.00),
       zoom: 3
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOpt);

    var geocoder = new google.maps.Geocoder();
    var index = 0;

    var geocoderFunction = function () { 
       geocoder.geocode({ 'address': locations[index] }, function (results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
             new google.maps.Marker({
                map: map, 
                position: results[0].geometry.location
             });             
          }

          // Call the geocoder with a 100ms delay
          index++;
          if (locations.length > index) {
             setTimeout(geocoderFunction, 100);
          }
       });
    }

    // Launch the geocoding process
    geocoderFunction();
  </script> 
</body>
</html>

您需要做的就是从 ColdFusion 渲染 JavaScript 数组 locations,而不是使用示例中的硬编码数组。

上面例子的截图:

Google Maps API Geocoding Demo

关于javascript - 将城市/州从 SQL Server 加载到 Google map ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2899506/

相关文章:

api - 从当前位置到标记的 Google map API 路线

javascript - scrollIntoView() 不工作 : does not taking in account fixed element

c# - 使用 bool 参数从 C# 调用 Catalog.set_execution_parameter_value

javascript - 如何使用 materialize.css 创建 slider

sql-server - SQL Server - 单个过程与单个过程

sql-server - 在函数中返回存储过程结果

java - 使用 Geotools 创建 Google map 叠加层

java - Android Studio : Can I Refer to a Started Service in Java Code?

javascript - jquery ajax : headers seem to not be working

javascript - 自动调整大小的文本输入框html