标记自定义和方向 API

Question

我正在使用 Google 地图在我的应用程序中显示方向。我想自定义标记以显示比默认值更多的文本，默认值仅显示位置名称，即城市、州和其他邮政编码。我的想法是在标记气泡上添加自定义文本。这是我迄今为止尝试过的代码。 注意：我尝试添加标记但没有工作。并且填充地图的数据也是使用 db 中的 json 获得的。我在代码之后发布了示例结果。

代码：

  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
  }

  function calcRoute() {
     // get route no
     var request='';
     var route_no=($(".route_no").attr('id')); 
     $.ajax({
         type: 'POST',
         url: base_url+"index.php/routes/getMapData",
         data: {
            route: route_no
         },
         success: function(data){
             //alert(JSON.stringify(data[0].waypoints))
             var datavalues='';
             datavalues=data[0];
             var wypt=[];

                    $.each(datavalues.waypoints,function(index,value){
                    {
                      wypt.push({location: value.location,stopover: value.stopover})

                    }
                });



             request={

                 origin:""+data[0].origin+"",
                 destination:""+data[0].destination+"",
                   waypoints:  wypt,
                 travelMode: google.maps.DirectionsTravelMode.DRIVING
             }
        //Add marker
        var mark=[]; 
                $.each(datavalues.title,function(index,value){
                    mark.push({location:value.location,title: value.company})
                });

               var marker= new google.maps.Marker( mark );
                marker.setMap(map);
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
             return false;
         },
         dataType: 'json'         
     })

  }

示例 JSON 结果：

[{"origin":"Mantachie MS 38855","destination":"Mantachie MS 38855","waypoints":[{"stopover":true,"location":"JACKSON TN 38305"},{"stopover":true,"location":"UPPER SANDUSKY ON 43351"}],"title":[{"company":"TBMS","location":"Mantachie MS 38855"},{"company":"ARJ MANUFACTURING","location":"JACKSON TN 38305"},{"company":"BRIDGESTONE","location":"UPPER SANDUSKY ON 43351"},{"company":"TBMS","location":"Mantachie MS 38855"}]}]

我想在城市和州旁边的标记上显示公司名称。

Here is a sample map 来自 google，展示了方向 API 的工作原理。

Answer 1

这是一个自定义图标、信息窗口中的文本并向侧边栏添加条目的示例：http://www.geocodezip.com/v3_directions_custom_iconsC.html

代码 sn-p：

// this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = "";

      var gmarkers = [];
      var map = null;
      var startLocation = null;
      var endLocation = null;

      function initialize() {
        var center = new google.maps.LatLng(24.7756, 121.0062);

        map = new google.maps.Map(document.getElementById('map_canvas'), {
          center: center,
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        google.maps.event.addListener(map, 'click', function() {
          infowindow.close();
        });

        var directionsService = new google.maps.DirectionsService();
        var request = {
          origin: "532 Beacon St., Boston, MA",
          destination: "77 Massachusetts Ave, Cambridge, MA",
          travelMode: google.maps.DirectionsTravelMode.WALKING
        };

        var polyline = new google.maps.Polyline({
          path: [],
          strokeColor: '#FF0000',
          strokeWeight: 3
        });

        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            var bounds = new google.maps.LatLngBounds();
            var route = response.routes[0];
            var summaryPanel = document.getElementById("directions_panel");
            var detailsPanel = document.getElementById("direction_details");
            startLocation = new Object();
            endLocation = new Object();

            summaryPanel.innerHTML = "";
            detailsPanel.innerHTML = '<ul>';

            // For each route, display summary information.
            for (var i = 0; i < route.legs.length; i++) {
              var routeSegment = i + 1;
              summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
              summaryPanel.innerHTML += route.legs[i].start_address + " to ";
              summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
              summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
            }
            var path = response.routes[0].overview_path;
            var legs = response.routes[0].legs;
            for (i = 0; i < legs.length; i++) {
              if (i == 0) {
                startLocation.latlng = legs[i].start_location;
                startLocation.address = legs[i].start_address;
                createMarker(legs[i].start_location, "start", legs[i].start_address, "green");
              }
              endLocation.latlng = legs[i].end_location;
              endLocation.address = legs[i].end_address;
              var steps = legs[i].steps;
              for (j = 0; j < steps.length; j++) {
                var nextSegment = steps[j].path;
                detailsPanel.innerHTML += "<li>" + steps[j].instructions;
                var dist_dur = "";
                if (steps[j].distance && steps[j].distance.text) dist_dur += "&nbsp;" + steps[j].distance.text;
                if (steps[j].duration && steps[j].duration.text) dist_dur += "&nbsp;" + steps[j].duration.text;
                if (dist_dur != "") {
                  detailsPanel.innerHTML += "(" + dist_dur + ")<br /></li>";
                } else {
                  detailsPanel.innerHTML += "</li>";

                }
                for (k = 0; k < nextSegment.length; k++) {
                  polyline.getPath().push(nextSegment[k]);
                  bounds.extend(nextSegment[k]);



                }
              }
            }

            detailsPanel.innerHTML += "</ul>"
            polyline.setMap(map);
            map.fitBounds(bounds);
            createMarker(endLocation.latlng, "end", endLocation.address, "red");
            // == create the initial sidebar ==
            makeSidebar();

          }
        });
      }
      var icons = new Array();
      icons["red"] = {
        url: "http://maps.google.com/mapfiles/ms/micons/red.png",
        // This marker is 32 pixels wide by 32 pixels tall.
        size: new google.maps.Size(32, 32),
        // The origin for this image is 0,0.
        origin: new google.maps.Point(0, 0),
        // The anchor for this image is at 16,32.
        anchor: new google.maps.Point(16, 32)
      };

      function getMarkerImage(iconColor) {
          if ((typeof(iconColor) == "undefined") || (iconColor == null)) {
            iconColor = "red";
          }
          if (!icons[iconColor]) {
            icons[iconColor] = {
              url: "http://maps.google.com/mapfiles/ms/micons/" + iconColor + ".png",
              // This marker is 32 pixels wide by 32 pixels tall.
              size: new google.maps.Size(32, 32),
              // The origin for this image is 0,0.
              origin: new google.maps.Point(0, 0),
              // The anchor for this image is at 16,32.
              anchor: new google.maps.Point(16, 32)
            };
          }
          return icons[iconColor];

        }
        // Marker sizes are expressed as a Size of X,Y
        // where the origin of the image (0,0) is located
        // in the top left of the image.

       // Origins, anchor positions and coordinates of the marker
       // increase in the X direction to the right and in
       // the Y direction down.

      var iconImage = {
        url: 'http://maps.google.com/mapfiles/ms/micons/red.png',
        // This marker is 32 pixels wide by 32 pixels tall.
        size: new google.maps.Size(32, 32),
        // The origin for this image is 0,0.
        origin: new google.maps.Point(0, 0),
        // The anchor for this image is at 16,32.
        anchor: new google.maps.Point(16, 32)
      };
       // Shapes define the clickable region of the icon.
       // The type defines an HTML &lt;area&gt; element 'poly' which
       // traces out a polygon as a series of X,Y points. The final
       // coordinate closes the poly by connecting to the first
       // coordinate.
      var iconShape = {
        coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
        type: 'poly'
      };
      var infowindow = new google.maps.InfoWindow({
        size: new google.maps.Size(150, 50)
      });

      function createMarker(latlng, label, html, color) {
        // alert("createMarker("+latlng+","+label+","+html+","+color+")");
        var contentString = '<b>' + label + '</b><br>' + html;
        var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          icon: getMarkerImage(color),
          shape: iconShape,
          title: label,
          zIndex: Math.round(latlng.lat() * -100000) << 5
        });
        marker.myname = label;
        gmarkers.push(marker);

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(contentString);
          infowindow.open(map, marker);
        });
      }

      function myclick(i) {
          google.maps.event.trigger(gmarkers[i], "click");
        }
        // == rebuilds the sidebar to match the markers currently displayed ==

      function makeSidebar() {
        var html = "";
        for (var i = 0; i < gmarkers.length; i++) {
          html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
        }
        document.getElementById("side_bar").innerHTML = html;
      }
      google.maps.event.addDomListener(window, 'load', initialize);

html {
  height: 100%
}
body {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#map_canvas {
  height: 100%
}

<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
  <table border="1">
    <tr>
      <td>
        <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="direction_details" style="margin:20px;"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="side_bar" style="margin:20px;"></div>
      </td>
    </tr>
  </table>
</div>