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 脚本时必须包含 Geometry 库：

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>

谷歌地图街景显示标记在我的 POV 或我旁边

1 个答案: