Question

我在下面有这个代码，它从谷歌地图上绘制一条来自XML文件的坐标。但是我希望它显示第一个坐标和最后一个带位置标记的坐标。我设法做到这一点，没有按照这里的步骤绘制线：

https://developers.google.com/maps/articles/phpsqlajax_v3?csw=1

但似乎无法整合2.即绘制线并在开始和结束时放置标记。

我确定它只是一小部分代码我必须添加下面已有的代码，但是我正在破坏我的火车试图解决它。任何帮助将不胜感激。

 <!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>PHP/MySQL & Google Maps Example</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    //<![CDATA[

    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
      }
    };

function load() {
    var point;
                    var flightPlanCoordinates=new Array();
            var map = new google.maps.Map(document.getElementById("map"), {
                center: new google.maps.LatLng(50.431, -3.202),
                zoom: 9,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false,
                mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                 },
                navigationControl: true,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.SMALL
                }
            });

            downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;

        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
            flightPlanCoordinates[i]=point;

          }

          var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);

      });

        }

        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>

  </head>

  <body onload="load()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>

</html>

Answer 1

在上面发布的代码中，您永远不会将标记添加到地图中，这可以通过以下代码完成：

var marker = new google.maps.Marker({
  map: map, //The Map Object
  position: point //The location of the Marker
});

您需要在遍历GPS点时将此语句放入for循环中，如果是第一次迭代或循环的最后一次迭代，则添加标记。你可以像在你发布的例子中那样在循环之后绘制折线。

将地点标记添加到Google地图

1 个答案: