Question

所以我正在使用Google Maps API，目前我有一个自定义标记，可以突出显示该位置。我想做的是，如果可能的话，可以点击它并让它显示谷歌地图上通常点击地名时获得的谷歌地图指示对话框（例如THIS）。在那一刻我只是将它设置为放大标记，但显然如果我可以让它工作，我将摆脱该功能。

提前感谢您的帮助。

这是我的代码：

<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的路线处理。原始功能由Mike Williams for the Google Maps Javascript API v2编写（现已弃用并已关闭）。所以这个Javascript基于社区教会Javascript团队提供的代码（http://www.bisphamchurch.org.uk/，http://econym.org.uk/gmap/）

工作代码段：

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 Maps API已更新，现在，当您进行方位更新时，可以执行以下操作：

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

别忘了平放您的标记。这样可以确保标记向北对齐，即使用户旋转地图，方位也能正常工作。

使用Google Maps API标记的方向

2 个答案: