在Google地圖上標記來自數據庫的多個緯度和經度值的路線

我已經編寫了一個PHP和javaScript代碼，它將從數據庫中檢索經度和緯度信息，並根據適當的位置（使用經度和緯度值）。這工作正常。在Google地圖上標記來自數據庫的多個緯度和經度值的路線

我需要加入這些標記並在地圖上繪製路線。怎麼做。

<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <style type="text/css"> 
    body { font: normal 10pt Helvetica, Arial; } 
    #map { width: 350px; height: 300px; border: 0px; padding: 0px; } 
    </style> 
    <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript"> 

    var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png", 
    new google.maps.Size(32, 32), new google.maps.Point(0, 0), 
    new google.maps.Point(16, 32)); 
    var center = null; 
    var map = null; 
    var currentPopup; 
    var bounds = new google.maps.LatLngBounds(); 

    function addMarker(lat, lng, info) 
{ 
    var pt = new google.maps.LatLng(lat, lng); 
bounds.extend(pt); 
var marker = new google.maps.Marker(
{ 
    position: pt, 
    icon: icon, 
    map: map 
}); 
var popup = new google.maps.InfoWindow(
{ 
    content: info, 
    maxWidth: 300 
}); 

google.maps.event.addListener(marker, "click", function() 
{ 
    if (currentPopup != null) 
    { 
     currentPopup.close(); 
     currentPopup = null; 
    } 
    popup.open(map, marker); 
    currentPopup = popup; 
    }); 
    google.maps.event.addListener(popup, "closeclick", function() 
    { 
    map.panTo(center); 
    currentPopup = null; 
    }); 
    } 

function initMap() 
{ 
map = new google.maps.Map(document.getElementById("map"), { 
center: new google.maps.LatLng(0, 0), 
zoom: 14, 
mapTypeId: google.maps.MapTypeId.ROADMAP, 
mapTypeControl: false, 
mapTypeControlOptions: 
{ 
    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
}, 
navigationControl: true, 
navigationControlOptions: 
{ 
style: google.maps.NavigationControlStyle.SMALL 
} 
}); 


    $.getJSON('googlescript.php', function(items) 
    { 
    for (var i = 0; i < items.length; i++) { 
     (function(item) { 
     addMarker(item.lat, item.long, '<b>' + item.name + '</b><br />' + item.desc); 
    })(items[i]); 
    } 
    }); 

    center = bounds.getCenter(); 
map.fitBounds(bounds); 

    } 
    </script> 
    </head> 
    <body onload="initMap()" style="margin:0px; border:0px; padding:0px;"> 
    <div id="map"></div> 
    </html>

來源

2012-12-07 user1844654

你想標記與直線，或駕駛路線連接？ – duncan

@duncan我只想用直線連接它 – user1844654

修改您的JSON功能的恢復是這樣的：

$.getJSON('googlescript.php', function(items) 
    { 
    var routePoints = []; 
    for (var i = 0; i < items.length; i++) { 
     (function(item) { 
     addMarker(item.lat, item.long, '<b>' + item.name + '</b><br />' + item.desc); 
    })(items[i]); 
    routePoints.push(new google.maps.LatLng(items[i].lat,items[i].long)); 
    } 
    var route= new google.maps.Polyline({ 
    path: routePoints, 
    strokeColor: "#FF0000", 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
    }); 

    route.setMap(map); 

    });

來源

2012-12-08 06:36:48 pkExec

我想你看的折線對象，你可以看到如果你有一個更大的項目，我將建議使用的GMap2使用.KML文件如何內google maps documentation

使用。但是，您應該可以輕鬆地使用Google文檔來實現您的目標..

來源

2012-12-07 09:35:26 gulty

我會嘗試使用多段線。是否有可能使用多段線從數據庫中檢索經度和緯度值 – user1844654

JavaScript在客戶端工作，因此不支持。但是您可以編寫一個PHP腳本，在服務器上創建一個.kml文件，其中包含您的標記，markerpictures，lat和lon以及要顯示的所有其他數據，例如，在工具提示中。之後，您可以通過您的js請求kml文件（您必須在google maps doc中查找kml），並且它會自動顯示所有標記。您也可以在kml內使用多段線。還有其他幾種方法可以做到這一點，但我個人認爲這是一個很好的解決方案，可以處理谷歌地圖，特別是有很多標記。你也可以創建一個json。 – gulty

您需要了解POLYLINE ARRAYS才能完成將所有標記與一條線連接起來。文檔很好地解釋了它。

但是，折線數組使用javascript數組，所以如果您正在尋找從數據庫中獲取值，那麼您應該尋找一些方法將從數據庫中提取的經緯度數組傳遞給JavaScript函數。網站上已有一篇文章展示瞭如何運作Using PHP/MySQL with Google Maps。看看這篇文章，並學習使用折線陣列，這應該會幫助你。

來源

2012-12-08 05:37:02 Cdeez

在Google地圖上標記來自數據庫的多個緯度和經度值的路線

回答

相關問題