我可以使用谷歌地图javascript api来显示点和多段线吗

Question

我正在为我的一个客户资产编码资产映射。

数据库包含以下两个表中的信息

tbl资产

AssetID
AssetName
AssetLocation
AssetLat
AssetLng
AssetType

tbl资产链接

LinkID
LinkType
LinkLat1
LinkLng1
LinkLat2
LinkLng2

tblAssets用于绘制单个资产，这些资产包含其他信息（与此问题无关），tblAssetLinks在其当前应用程序中在LinkLat1、LinkLng1和LinkLat2、LinkLng 2 之间画一条线

我已经设法让tblAssets绘制加载数据库为xml数组的图，如下所示

<markers>
<marker PrimaryKey="175223" NodeName="TQ88768407" distance="0.0123043158297526" 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'
          });
		  var trafficLayer = new google.maps.TrafficLayer();
		  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");
			  var ownedby = markers[i].getAttribute("OwnedBy");
              var nodeid = markers[i].getAttribute("NodeID");
			  var type = markers[i].getAttribute("Type");
			  var lat = markers[i].getAttribute("lat");
			  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来在地图上绘制多段线和上面的点？

Answer 1

要解析该XML，请获取每个link元素，检索它们的lat1/lng1和lat2/lng2属性，并从中生成多段线（根据文档中的示例。

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

概念验证小提琴

代码片段：

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>