google 在我的 POV 中或在我旁边的地图街景显示标记

Question

我的自定义标记可拖动并位于我当前的位置。

但是，我需要先改变我的位置才能看到我的自定义标记，这样我才能将它拖到我想放的地方。

有没有一种方法可以让我的自定义标记固定在我面前或旁边，只要我能立即看到它们。

var position = { lat: 42.3456778143501, lng: -71.09837363184101 }
var pano_heading = 68.85497936110396;
var pano_pitch = 14.77626025895016;

function initialize() {
    // Note: constructed panorama objects have visible: true
    // set by default.
    const panorama = new google.maps.StreetViewPanorama(
        document.getElementById("map"),
        {
            position: position,
            pov: {
                heading: pano_heading,
                pitch: pano_pitch
            },
            addressControlOptions: {
                position: google.maps.ControlPosition.BOTTOM_CENTER,
            },
            linksControl: true,
            panControl: true,
            enableCloseButton: true,
        }
    );

    var marker_pano = new google.maps.Marker({
        map: panorama,
        position: position,
        title: 'test',
        draggable: true,
        animation: google.maps.Animation.DROP,
    });

    panorama.addListener("pano_changed", () => {
        //console.log('pano ID', panorama.getPano());
        const panoID = document.getElementById("pano-id");
        panoID.innerHTML = "pano ID = " + panorama.getPano();
    });

    panorama.addListener("position_changed", () => {
        const positionCell = document.getElementById("position");
        positionCell.innerHTML = "postion = " + panorama.getPosition() + "";
    });

    panorama.addListener("pov_changed", () => {
        const headingCell = document.getElementById("pano-heading");
        const pitchCell = document.getElementById("pano-pitch");
        headingCell.innerHTML = "pano heading = " + panorama.getPov().heading + "";
        pitchCell.innerHTML = "pano pitch = " + panorama.getPov().pitch + "";
    });
}

html,
body {
  height: 80%;
  margin: 0;
  padding: 0;
}

#map,
#pano {
  float: left;
  height: 80%;
  width: 50%;
}

<div id="map"></div>
<div id="pano">
  <div id="position"></div>
  <div id="pano-id"></div>
  <div id="position"></div>
  <div id="pano-heading"></div>
  <div id="pano-pitch"></div>
</div>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=&v=weekly" async></script>

Answer 1

这是一个示例，说明如何将标记偏移标记距您当前位置 10 米的距离，并更改 POV 航向以使其面向标记。

听起来是比偏移您自己的位置更好的解决方案，因为这样做可能最终会出现在没有可用街景图像的地方...

请注意，加载 API 脚本时必须包含几何库：

https://maps.googleapis.com/maps/api/js?libraries=geometry

function initialize() {

  var position = new google.maps.LatLng(42.3456778143501, -71.09837363184101);
  var marker_position = google.maps.geometry.spherical.computeOffset(position, 10, 0);
  var heading = google.maps.geometry.spherical.computeHeading(position, marker_position);

  // Note: constructed panorama objects have visible: true
  // set by default.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map"), {
      position: position,
      pov: {
        heading: heading,
        pitch: -15
      },
      addressControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_CENTER,
      },
      linksControl: true,
      panControl: true,
      enableCloseButton: true,
    }
  );

  var marker_pano = new google.maps.Marker({
    map: panorama,
    position: marker_position,
    title: 'test',
    draggable: true,
    animation: google.maps.Animation.DROP,
  });

  panorama.addListener("pano_changed", () => {
    //console.log('pano ID', panorama.getPano());
    const panoID = document.getElementById("pano-id");
    panoID.innerHTML = "pano ID = " + panorama.getPano();
  });

  panorama.addListener("position_changed", () => {
    const positionCell = document.getElementById("position");
    positionCell.innerHTML = "postion = " + panorama.getPosition() + "";
  });

  panorama.addListener("pov_changed", () => {
    const headingCell = document.getElementById("pano-heading");
    const pitchCell = document.getElementById("pano-pitch");
    headingCell.innerHTML = "pano heading = " + panorama.getPov().heading + "";
    pitchCell.innerHTML = "pano pitch = " + panorama.getPov().pitch + "";
  });
}

html,
body {
  height: 80%;
  margin: 0;
  padding: 0;
}

#map,
#pano {
  float: left;
  height: 180px;
  width: 50%;
}

<div id="map"></div>
<div id="pano">
  <div id="position"></div>
  <div id="pano-id"></div>
  <div id="position"></div>
  <div id="pano-heading"></div>
  <div id="pano-pitch"></div>
</div>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=geometry&v=weekly" async></script>

google 在我的 POV 中或在我旁边的地图街景显示标记

google map streetview display marker in my POV or beside me

html

javascript

google-maps

google-maps-api-3

google-street-view