如何在谷歌地图API中提供静态消息

时间：2017-08-10 10:47:35

标签： javascript google-maps google-maps-markers

我正在使用谷歌地图API，它工作正常，就像在这张地图中，如果我点击一个标记，一个对话框打开显示位置地址;而不是这个我想显示一个静态值。如何更改我的代码才能执行此操作？

function initMap() {
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var directionsService = new google.maps.DirectionsService;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,
          center: {lat: 12.9577129, lng: 77.6764937} // Starting Point Marathahalli
        });
        directionsDisplay.setMap(map);

        calculateAndDisplayRoute(directionsService, directionsDisplay);
       
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        var selectedMode = document.getElementById('mode').value;
        
        /* configure waypoints */
        var waypts = [];
        waypts.push(
			{
              location: {lat: 12.9583665, lng: 77.6635659}, // HAL
              stopover: true
            } ,{
              location: {lat: 12.9630167, lng: 77.6268656},
              stopover: true
            }
			);
            
        directionsService.route({
          origin: {lat: 12.9577129, lng: 77.6764937},  // Haight.
          destination: {lat: 12.9868068, lng: 77.6070679},  // Ending Point Shivaji Nagar.
          travelMode: google.maps.TravelMode[selectedMode],
          waypoints: waypts
        }, function(response, status) {
          if (status == 'OK') {
            directionsDisplay.setDirections(response);
			console.log(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Travel modes in directions</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
  <form id="testForm">
	<select name="tripId">
		<option value=""></option>
	</select>
  </form>
  
    <div id="floating-panel">
    <b>Mode of Travel: </b>
    <select id="mode">
      <option value="DRIVING">Driving</option>
    </select>
    </div>
    <div id="map"></div>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7lDrYPDmJz1JsQh2rbWA9uRZHcFk_xJY&callback=initMap">
    </script>

1 个答案:

答案 0 :(得分：0)

要更改InfoWindows，您必须禁止标记并使用关联的信息窗添加自己的标记。

var directionsDisplay = new google.maps.DirectionsRenderer({
  suppressMarkers: true
});

标记的自定义渲染器：

var startLocation, endLocation, waypts;
function RenderCustomDirections(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    waypts = [];
    var bounds = new google.maps.LatLngBounds();
    var route = response.routes[0];
    startLocation = new Object();
    endLocation = new Object();

    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;
        startLocation.marker = createMarker(legs[i].start_location, "start", legs[i].start_address, "green", String.fromCharCode("A".charCodeAt(0)));
      } else {
        waypts[i] = new Object();
        waypts[i].latlng = legs[i].start_location;
        waypts[i].address = legs[i].start_address;
        waypts[i].marker = createMarker(legs[i].start_location, "waypoint" + i, legs[i].start_address, "yellow", String.fromCharCode("A".charCodeAt(0) + i));
      }
      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;
        for (k = 0; k < nextSegment.length; k++) {
          bounds.extend(nextSegment[k]);
        }
      }
    }

    endLocation.marker = createMarker(endLocation.latlng, "My Company", endLocation.address, "red", String.fromCharCode("A".charCodeAt(0) + waypts.length));
    google.maps.event.trigger(endLocation.marker, 'click');
  } else alert(status);
}

proof of concept fiddle（基于此示例：http://www.geocodezip.com/v3_GoogleEx_directions-waypointsE.html）

screen shot of result

代码段

＆＃13;
＆＃13; 
var map;
var gmarkers = [];

function initMap() {
  var directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
  });
  var directionsService = new google.maps.DirectionsService;
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {
      lat: 12.9577129,
      lng: 77.6764937
    } // Starting Point Marathahalli
  });
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(directionsService, directionsDisplay);
}
google.maps.event.addDomListener(window, 'load', initMap);

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var selectedMode = document.getElementById('mode').value;
  /* configure waypoints */
  var waypts = [];
  waypts.push({
    location: {
      lat: 12.9583665,
      lng: 77.6635659
    }, // HAL
    stopover: true
  }, {
    location: {
      lat: 12.9630167,
      lng: 77.6268656
    },
    stopover: true
  });

  directionsService.route({
    origin: {
      lat: 12.9577129,
      lng: 77.6764937
    }, // Haight.
    destination: {
      lat: 12.9868068,
      lng: 77.6070679
    }, // Ending Point Shivaji Nagar.
    travelMode: google.maps.TravelMode[selectedMode],
    waypoints: waypts
  }, function(response, status) {
    if (status == 'OK') {
      directionsDisplay.setDirections(response);
      RenderCustomDirections(response, status);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

function RenderCustomDirections(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    waypts = [];
    var bounds = new google.maps.LatLngBounds();
    var route = response.routes[0];
    startLocation = new Object();
    endLocation = new Object();

    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;
        startLocation.marker = createMarker(legs[i].start_location, "start", legs[i].start_address, "green", String.fromCharCode("A".charCodeAt(0)));
      } else {
        waypts[i] = new Object();
        waypts[i].latlng = legs[i].start_location;
        waypts[i].address = legs[i].start_address;
        waypts[i].marker = createMarker(legs[i].start_location, "waypoint" + i, legs[i].start_address, "yellow", String.fromCharCode("A".charCodeAt(0) + i));
      }
      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;
        for (k = 0; k < nextSegment.length; k++) {
          bounds.extend(nextSegment[k]);
        }
      }
    }
    endLocation.marker = createMarker(endLocation.latlng, "My Company", endLocation.address, "red", String.fromCharCode("A".charCodeAt(0) + waypts.length));
    google.maps.event.trigger(endLocation.marker, 'click');
  } else alert(status);
}

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 9,34.
  anchor: new google.maps.Point(16, 32),
  labelOrigin: new google.maps.Point(16, 10)
};

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 6,20.
      anchor: new google.maps.Point(16, 32),
      labelOrigin: new google.maps.Point(16, 10)
    };
  }
  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 20 pixels wide by 34 pixels tall.
  size: new google.maps.Size(20, 34),
  // The origin for this image is 0,0.
  origin: new google.maps.Point(0, 0),
  // The anchor for this image is at 9,34.
  anchor: new google.maps.Point(9, 34)
};
// 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, title, html, color, label) {
  var contentString = '<b>' + title + '</b><br>' + html;
  var marker = new google.maps.Marker({
    position: latlng,
    draggable: true,
    map: map,
    icon: getMarkerImage(color),
    shape: iconShape,
    title: title,
    label: label,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });
  marker.myname = title;
  gmarkers.push(marker);

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

  return marker;
}
＆＃13; 
/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
＆＃13; 
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<title>Travel modes in directions</title>
<form id="testForm">
  <select name="tripId">
    <option value=""></option>
  </select>
</form>
<div id="floating-panel">
  <b>Mode of Travel: </b>
  <select id="mode">
    <option value="DRIVING">Driving</option>
  </select>
</div>
<div id="map"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题