2010-05-24 34 views
6

Tôi đang cố gắng tạo một ứng dụng nhỏ có thành phố & trạng thái và mã địa lý địa chỉ đến vị trí lat/long. Ngay bây giờ tôi đang sử dụng API của Google Map, Coldfusion và SQL Server. Về cơ bản, các trường thành phố và tiểu bang nằm trong một bảng cơ sở dữ liệu và tôi muốn lấy các vị trí đó và lấy điểm đánh dấu trên Bản đồ Google hiển thị chúng ở đâu.Đang tải thành phố/tiểu bang từ SQL Server sang Google Maps?

Đây là mã của tôi để mã hóa địa lý và xem mã nguồn của trang cho thấy nó lặp chính xác qua truy vấn của tôi và đặt một vị trí ("Omaha, NE") vào trường địa chỉ, nhưng không có điểm đánh dấu hoặc Bản đồ cho rằng vấn đề, được hiển thị trên trang:

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

Và đây là đoạn code để khởi tạo bản đồ:

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); 
} 

tôi có một lao động bản đồ có sử dụng lat/dài mà khó được mã hóa vào bảng cơ sở dữ liệu, nhưng tôi muốn có thể chỉ sử dụng thành phố/tiểu bang và chuyển đổi đến một lat/long. Bất kỳ đề xuất hoặc hướng nào? Lưu trữ lat/long trong cơ sở dữ liệu cũng có thể, nhưng tôi không biết làm thế nào để làm điều đó trong SQL.

Trả lời

4

Bạn có thể muốn đồng nsider ví dụ sau:

Sử dụng 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> 

Sử dụng 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> 

Tất cả bạn cần làm là để render các mảng JavaScript locations từ ColdFusion, thay vì sử dụng hardcoded một trong ví dụ.

Ảnh chụp màn hình từ ví dụ trên:

Google Maps API Geocoding Demo

+0

Thank you very much Daniel, tôi đã làm như bạn nói và chuyển đổi truy vấn của tôi vào một mảng bên trong các địa điểm khác nhau và đầu ra nó. Làm việc như người ở! – knawlejj

+0

@knawlejj: Đó là tin tốt. Tôi rất vui vì nó đã hoạt động :) –

2

Bạn cần phải thực sự thêm điểm đánh dấu vào bản đồ bằng cách sử dụng phương pháp addOverlay:

var point = new GLatLng(...); 
map.addOverlay(new GMarker(point)); 

Bạn cũng có thể thêm trường hợp của lớp Marker vào bản đồ của bạn:

map.addOverlay(marker); 

Xem Lớp phủ Bản đồ tài liệu:

http://code.google.com/apis/maps/documentation/javascript/v2/overlays.html

Các vấn đề liên quan