3

我正在尝试在我的谷歌地图 api 上使用叠加层显示一组停车图标，但由于某种原因无法使其正常工作。

我在这里为我的 html 创建了一个 js fiddle 。这是它的开头：

  function setMarkers(map, locations) {

      var image = new google.maps.MarkerImage('parkingIcon.png');
  };

任何帮助表示赞赏。谢谢。

4

2 回答 2

0

好的，试试这段代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html {
        height: 100%
      }
      body {
        height: 100%;
        margin: 0;
        padding: 0
      }
      #map_canvas {
        height: 100%
      }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAoiYR3lgzcF8CxuOwe7SYsJAPjZQXOhQQ&sensor=false"></script>
    <script type="text/javascript">
      var line;
      var map;
      var loc;
      var locations = [];
      var image = new google.maps.MarkerImage('parkingIcon.png');

      function initialize() {
        var raleigh = new google.maps.LatLng(35.77425, -78.639248);
        var mapOptions = {
          zoom : 17,
          minZoom : 17,
          center : raleigh,
          mapTypeId : google.maps.MapTypeId.HYBRID
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        var cityPlaza;

        /*var RLINELayer = new google.maps.KmlLayer('http://caseymmiller.com/j586/MapsTest/RLINE.kml');
         RLINELayer.setMap(map);*/

        var plazaCoords = [
          new google.maps.LatLng(35.773893, -78.63854),
          new google.maps.LatLng(35.772944, -78.638594),
          new google.maps.LatLng(35.772962, -78.639345),
          new google.maps.LatLng(35.773884, -78.63928)
        ];

        cityPlaza = new google.maps.Polygon({
          paths : plazaCoords,
          strokeColor : "#33CCFF",
          strokeOpacity : 0.8,
          strokeWeight : 2,
          fillColor : "#33CCFF",
          fillOpacity : 0.35
        });
        cityPlaza.setMap(map);

        var parking = [
          ['Salisbury Deck', 35.775007, -78.640804],
          ['Cabarrus Deck', 35.774589, -78.640793],
          ['Hannover Deck', 35.774511, -78.640031],
          ['Convention Center Underground Deck', 35.773292, -78.639355],
          ['Performing Arts Deck', 35.772666, -78.641576],
          ['Charter Square Deck', 35.773893, -78.638551],
          ['Blount Street Deck', 35.776226, -78.637499],
          ['McDowell Street Surface Parking', 35.775303, -78.641673],
          ['Salisbury Parking Lot', 35.775442, -78.640814],
          ['Convention Center Parking Lot', 35.772553, -78.639527],
          ['Lenoir Street Parking Lot', 35.773231, -78.638207],
          ['Carrabus street Parking Lot', 35.774032, -78.63824]
        ];

        for (var i = 0; i < parking.length; i++) {
          createMarker(parking[i]);
        }

        var lineCoordinates = [new google.maps.LatLng(35.779742, -78.643389), new google.maps.LatLng(35.77438, -78.643733), new google.maps.LatLng(35.774259, -78.640396), new google.maps.LatLng(35.772953, -78.640482), new google.maps.LatLng(35.772866, -78.638465), new google.maps.LatLng(35.776879, -78.638315), new google.maps.LatLng(35.776766, -78.634989), new google.maps.LatLng(35.778097, -78.634883), new google.maps.LatLng(35.778202, -78.638209), new google.maps.LatLng(35.781178, -78.638059)];

        var lineSymbol = {
          path : google.maps.SymbolPath.CIRCLE,
          scale : 8,
          strokeColor : '#000'
        };

        line = new google.maps.Polyline({
          path : lineCoordinates,
          strokeColor : '#C82536',
          icons : [{
            icon : lineSymbol,
            offset : '100%'
          }],
          map : map
        });
        animateCircle();
      }

      function animateCircle() {
        var count = 0;
        var time = offsetId = window.setInterval(function() {
          count = (count + 1) % 2400;

          var icons = line.get('icons');
          icons[0].offset = (count / 24) + '%';
          line.set('icons', icons);
        }, 20);
      }

      function createMarker(parking) {
        var myLatLng = new google.maps.LatLng(parking[1], parking[2]);
        console.log(myLatLng.toUrlValue());
        var marker = new google.maps.Marker({
          position : myLatLng,
          map : map,
          //icon : image   //<---- Get rid the comment after upload "parkingIcon.png" file.
          /*title: parking[0],*/
        });
        return marker;
      }

    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>​
于 2012-11-27T00:38:03.917 回答
0
  1. 您需要一个用于您的parkingIcon 的URL，它在jsfiddle 中不起作用；如果它位于本地目录中，它可能会在您的站点上运行。

  2. 您需要实际处理您的数组并创建标记，这段代码没有做任何有用的事情：

    function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('parkingIcon.png');
};

    这样的事情会更好：

    function setMarkers(map, locations) {

  var image = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/icons/parkinglot.png');
  for (var i=0; i<locations.length; i++)
  {
    var marker = new google.maps.Marker({
      icon: 'http://maps.google.com/mapfiles/ms/icons/parkinglot.png', 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      title: locations[i][0],
      map: map
    });
  }
 };

  3. 您需要将“停车”数组传递给函数（位置是未定义的单个元素）。

工作jsfiddle

于 2012-11-27T03:36:44.763 回答