2016-05-12 44 views
-1

我正在爲我的客戶資產之一編碼資產圖。我可以使用google maps javascript api來顯示點和折線嗎?

該數據庫包含的信息,如下面的兩個表

tblAssets

AssetID 
AssetName 
AssetLocation 
AssetLat 
AssetLng 
AssetType 

tblAssetLinks

LinkID 
LinkType 
LinkLat1 
LinkLng1 
LinkLat2 
LinkLng2 

tblAssets被用來繪製個人資產,這些包含其它信息(無關此問題)和tblAssetLinks在他們當前的應用程序中繪製LinkLat1,LinkLng1和LinkLat2之間的一條線,LinkLng2

我設法得到tblAssets繪製裝載數據庫爲XML數組如下

<markers> 
 
<marker PrimaryKey="175223" NodeName="TQ88768407" distance="0." lat="51.455662" lng="0.716716" Type="NODE"/> 
 
<marker PrimaryKey="175221" NodeName="TQ88768405" distance="0.0175958000932205" lat="51.455498" lng="0.716893" Type="NODE"/> 
 
<marker PrimaryKey="175226" NodeName="TQ88768411" distance="0.023174171700034" lat="51.455791" lng="0.716119" Type="NODE"/> 
 
</markers>

這是我使用的加載我點到我的地圖的JavaScript

 <script type="text/javascript"> 
 
     //<![CDATA[ 
 

 
     var customIcons = { 
 
      OTHER: { 
 
      icon: 'images/other.png' 
 
      } 
 
     }; 
 

 
     function load() { 
 
      //map.addMapType(G_SATELLITE_3D_MAP); 
 
      var map = new google.maps.Map(document.getElementById("map"), { 
 
      center: new google.maps.LatLng(51.4555503, 0.7164931), 
 
      zoom: 18, 
 
      mapTypeId: 'hybrid' 
 
      }); 
 
\t \t var trafficLayer = new google.maps.TrafficLayer(); 
 
\t \t trafficLayer.setMap(map); 
 
      var infoWindow = new google.maps.InfoWindow; 
 

 
      // Change this depending on the name of your PHP file 
 
      downloadUrl("xmlgen_asset.php?lat=51.4555503&lng=0.7164931", function(data) { 
 
      var xml = data.responseXML; 
 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
 
      for (var i = 0; i < markers.length; i++) { 
 
       var primarykey = markers[i].getAttribute("PrimaryKey"); 
 
       var nodename = markers[i].getAttribute("NodeName"); 
 
\t \t \t var ownedby = markers[i].getAttribute("OwnedBy"); 
 
       var nodeid = markers[i].getAttribute("NodeID"); 
 
\t \t \t var type = markers[i].getAttribute("Type"); 
 
\t \t \t var lat = markers[i].getAttribute("lat"); 
 
\t \t \t var lng = markers[i].getAttribute("lng"); 
 
       var point = new google.maps.LatLng(
 
        parseFloat(markers[i].getAttribute("lat")), 
 
        parseFloat(markers[i].getAttribute("lng"))); 
 
       var html = nodename + "<br/>" + type; 
 
       var icon = customIcons[type] || {}; 
 
       var marker = new google.maps.Marker({ 
 
       map: map, 
 
       position: point, 
 
       icon: icon.icon 
 
       }); 
 
       bindInfoWindow(marker, map, infoWindow, html); 
 
      } 
 
      }); 
 
     } 
 

 
     function bindInfoWindow(marker, map, infoWindow, html) { 
 
      google.maps.event.addListener(marker, 'click', function() { 
 
      infoWindow.setContent(html); 
 
      infoWindow.open(map, marker); 
 
      }); 
 
     } 
 

 
     function downloadUrl(url, callback) { 
 
      var request = window.ActiveXObject ? 
 
       new ActiveXObject('Microsoft.XMLHTTP') : 
 
       new XMLHttpRequest; 
 

 
      request.onreadystatechange = function() { 
 
      if (request.readyState == 4) { 
 
       request.onreadystatechange = doNothing; 
 
       callback(request, request.status); 
 
      } 
 
      }; 
 

 
      request.open('GET', url, true); 
 
      request.send(null); 
 
     } 
 

 
     function doNothing() {} 
 

 
     //]]> 
 

 
     </script>

我想知道是否有一種方法可以讓我使用tblAssetLinks將另一個xml加載到地圖上以繪製多段線以及上面的點?

+0

當然。您可以將它們放在單獨的XML中,或將它們作爲不同的標籤包含在同一個XML中。 – geocodezip

+0

@geocodezip我將如何解決與其他xml的多段線? –

+0

你是如何創建現有的XML?我會建議一個「行」標籤,其中包含線的每個頂點的「點」標籤。 – geocodezip

回答

0

要分析XML,獲取每個link元素,檢索其LAT1/lng1和LAT2/lng2屬性,並從他們做出折線(佔example in the documentation

var polydata = xml.getElementsByTagName('link'); 
    for (var i = 0; i < polydata.length; i++) { 
    var pt1 = { 
     lat: parseFloat(polydata[i].getAttribute("lat1")), 
     lng: parseFloat(polydata[i].getAttribute("lng1")) 
    } 
    var pt2 = { 
     lat: parseFloat(polydata[i].getAttribute("lat2")), 
     lng: parseFloat(polydata[i].getAttribute("lng2")) 
    } 
    var polyline = new google.maps.Polyline({ 
     path: [pt1, pt2], 
     map: map 
    }); 
    } 

proof of concept fiddle

代碼片段:

var geocoder; 
 
var map; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(51, 0), 
 
     zoom: 3, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var xml = xmlParse(xmlData); 
 
    var polydata = xml.getElementsByTagName('link'); 
 
    for (var i = 0; i < polydata.length; i++) { 
 
    var pt1 = { 
 
     lat: parseFloat(polydata[i].getAttribute("lat1")), 
 
     lng: parseFloat(polydata[i].getAttribute("lng1")) 
 
    } 
 
    var pt2 = { 
 
     lat: parseFloat(polydata[i].getAttribute("lat2")), 
 
     lng: parseFloat(polydata[i].getAttribute("lng2")) 
 
    } 
 
    var polyline = new google.maps.Polyline({ 
 
     path: [pt1, pt2], 
 
     map: map 
 
    }); 
 
    bounds.extend(polyline.getPath().getAt(0)); 
 
    bounds.extend(polyline.getPath().getAt(1)); 
 
    } 
 
    map.fitBounds(bounds); 
 
} 
 

 
function xmlParse(str) { 
 
    if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') { 
 
    var doc = new ActiveXObject('Microsoft.XMLDOM'); 
 
    doc.loadXML(str); 
 
    return doc; 
 
    } 
 

 
    if (typeof DOMParser != 'undefined') { 
 
    return (new DOMParser()).parseFromString(str, 'text/xml'); 
 
    } 
 

 
    return createElement('div', null); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 
var xmlData = '<links><link PrimaryKey="56669" OwnedBy="SWS" AssetID="30757610" distance="0.0161501151649766" lat1="51.455479" lng1="0.716877" lat2="51.455498" lng2="0.716893" Type="COMBINED"/><link PrimaryKey="45827" OwnedBy="SWS" AssetID="1386010" distance="0.024165762230059" lat1="51.455791" lng1="0.716119" lat2="51.455769" lng2="0.716060" Type="COMBINED"/><link PrimaryKey="92131" OwnedBy="SWS" AssetID="30757581" distance="0.0258313521247188" lat1="51.455750" lng1="0.716015" lat2="51.455734" lng2="0.716000" Type="COMBINED"/><link PrimaryKey="55871" OwnedBy="SWS" AssetID="30757590" distance="0.033043902136047" lat1="51.455833" lng1="0.715905" lat2="51.455853" lng2="0.715906" Type="SURFACE_WATER"/><link PrimaryKey="79135" OwnedBy="SWS" AssetID="1386511" distance="0.0387150798069927" lat1="51.455372" lng1="0.715662" lat2="51.455509" lng2="0.715598" Type="COMBINED"/><link PrimaryKey="55870" OwnedBy="SWS" AssetID="30757560" distance="0.039789930528151" lat1="51.455353" lng1="0.715646" lat2="51.455372" lng2="0.715662" Type="COMBINED"/><link PrimaryKey="79136" OwnedBy="SWS" AssetID="1386531" distance="0.0415342089389798" lat1="51.455051" lng1="0.717068" lat2="51.454903" lng2="0.716886" Type="COMBINED"/><link PrimaryKey="79062" OwnedBy="SWS" AssetID="1386001" distance="0.0424351462005461" lat1="51.455944" lng1="0.715768" lat2="51.455917" lng2="0.715723" Type="SURFACE_WATER"/><link PrimaryKey="2812" OwnedBy="SWS" AssetID="1385989" distance="0.042520172377456" lat1="51.455795" lng1="0.715615" lat2="51.455692" lng2="0.715767" Type="COMBINED"/><link PrimaryKey="4041" OwnedBy="SWS" AssetID="1386420" distance="0.043199028781749" lat1="51.456078" lng1="0.717043" lat2="51.455662" lng2="0.716716" Type="COMBINED"/></links>';
html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

+0

看起來不錯!我想我可以將這個工作從我的OP中加入到我現有的代碼中?我會在早上和這個一起玩,謝謝你的幫助@geocodezip –

+0

我一定是個白癡!我試圖將其複製到當前的腳本中,並防止它們全部加載在一起。然後我把你的小提琴中的相關部分複製到他們自己的html文檔中,並且沒有:(http://pastebin.com/KqcstXZs我錯過了什麼:( –

相關問題