使用 Google 地图 API 标记的方向

Question

所以我正在使用 Google 地图 API，目前我有一个突出显示位置的自定义标记。如果可能的话，我想做的是能够单击它并让它显示 google 地图方向对话框（例如 THIS），通常在 google 地图。当时我只是将它设置为放大标记，但显然如果我能让它工作的话我会去掉那个功能。

在此先感谢您的帮助。

这是我的代码：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {

    var location = new google.maps.LatLng(50.871622, -4.131561);  

    var mapOptions = {
      center: location,
      zoom: 11,
      scrollwheel: false
    };

    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

    var image = {
        url: 'img/mapmarker.png',
    };
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        animation: google.maps.Animation.DROP,
        icon: image,
        title: 'Deer Park Dairy'
    });
    google.maps.event.addListener(marker, 'click', function() {
        map.setZoom(15);
        map.setCenter(marker.getPosition());
      });

  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

您的代码包含来自 this example. The original functionality was written by Mike Williams for the Google Maps Javascript API v2 (which is now deprecated and turned off). So this Javascript is based on code provided by the Community Church Javascript Team (http://www.bisphamchurch.org.uk/, http://econym.org.uk/gmap/)

的路线处理

proof of concept fiddle

代码片段：

var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
// arrays to hold copies of the markers and html used by the side_bar 
// because the function closure trick doesnt work there 
var gmarkers = [];
var htmls = [];

// arrays to hold variants of the info window html with get direction forms open
var to_htmls = [];
var from_htmls = [];

// global "map" variable
var map = null;

var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});


function initialize() {

  var location = new google.maps.LatLng(50.871622, -4.131561);

  var mapOptions = {
    center: location,
    zoom: 11,
    scrollwheel: false
  };

  map = new google.maps.Map(document.getElementById("map"),
    mapOptions);

  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  var image = {
    url: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
  };
  var marker = new google.maps.Marker({
    position: location,
    map: map,
    animation: google.maps.Animation.DROP,
    icon: image,
    title: 'Deer Park Dairy'
  });

  var i = gmarkers.length;
  latlng = location;

  // The info window version with the "to here" form open
  to_htmls[i] = html + '<br>Directions: <b>To here<\/b> - <a href="javascript:fromhere(' + i + ')">From here<\/a>' +
    '<br>Start address:<form action="javascript:getDirections()">' +
    '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
    '<INPUT value="Get Directions" TYPE="button" onclick="getDirections()"><br>' +
    'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' +
    '<input type="hidden" id="daddr" value="' + latlng.lat() + ',' + latlng.lng() +
    '"/>';
  // The info window version with the "from here" form open
  from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <b>From here<\/b>' +
    '<br>End address:<form action="javascript:getDirections()">' +
    '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
    '<INPUT value="Get Directions" TYPE="SUBMIT"><br>' +
    'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' +
    '<input type="hidden" id="saddr" value="' + latlng.lat() + ',' + latlng.lng() +
    '"/>';
  // The inactive version of the direction info
  var html = marker.getTitle() + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <a href="javascript:fromhere(' + i + ')">From here<\/a>';
  var contentString = html;

  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(15);
    map.setCenter(marker.getPosition());
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
  // save the info we need to use later for the side_bar
  gmarkers.push(marker);
  htmls[i] = html;
}

google.maps.event.addDomListener(window, 'load', initialize);

// ===== request the directions =====
function getDirections() {
  // ==== Set up the walk and avoid highways options ====
  var request = {};
  if (document.getElementById("walk").checked) {
    request.travelMode = google.maps.DirectionsTravelMode.WALKING;
  } else {
    request.travelMode = google.maps.DirectionsTravelMode.DRIVING;
  }

  if (document.getElementById("highways").checked) {
    request.avoidHighways = true;
  }
  // ==== set the start and end locations ====
  var saddr = document.getElementById("saddr").value;
  var daddr = document.getElementById("daddr").value;

  request.origin = saddr;
  request.destination = daddr;
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else alert("Directions not found:" + status);
  });
}


// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}


// functions that open the directions forms
function tohere(i) {
  // gmarkers[i].openInfoWindowHtml(to_htmls[i]);
  infowindow.setContent(to_htmls[i]);
  infowindow.open(map, gmarkers[i]);
}

function fromhere(i) {
  // gmarkers[i].openInfoWindowHtml(from_htmls[i]);
  infowindow.setContent(from_htmls[i]);
  infowindow.open(map, gmarkers[i]);
}

// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/   
// http://econym.org.uk/gmap/
// from the v2 tutorial page at:
// http://econym.org.uk/gmap/basic3.htm

html,
body,
table {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
td,
tr {
  height: 100%;
  width: 50%;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<table>
  <tr>
    <td>
      <div id="map" style="width:100%; height:100%; border: 2px solid #3872ac;"></div>
    </td>
    <td>
      <div id="directionsPanel"></div>
    </td>
  </tr>
</table>

Answer 2

Google 地图 API 已更新，现在，当您获得方位角更新时，您可以执行以下操作：

val position = LatLng(latitude, longitude)
map.addMarker(MarkerOptions().position(position).title(title).icon(icon).flat(true).
              rotation(heading.toFloat()))

别忘了平整你的记号笔。它确保标记向北对齐，这样即使用户旋转地图，方位也能正常工作。

使用 Google 地图 API 标记的方向

Directions to marker with Google Maps API

javascript

google-maps

google-maps-api-3