2016-05-12 58 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我错过了什么:( –

相关问题