谷歌地图标记没有正确固定

Question

Code:

var dest1 = document.getElementById('textbox1').value;
var request = {
  origin:start,
  destination:dest1,
  travelMode: google.maps.TravelMode[selectedMode]
}

directionsService.route(request, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay1.setDirections(response);
  }
});

我正在使用 google API 查找位置，然后计算搜索到的地点与来自我的数据库的特定酒店之间的距离，在图像中你可以看到我已经搜索了路线图和“Leela Palace Bengaluru”的距离, HAL Airport Road, ISRO Colony, Bengaluru, Karnataka, India”到我的酒店，它来自数据库，您可以看到标记并未完全固定在 leela 宫殿上，而是显示在标记为的 leela 宫殿旁边图中的 B。我不知道我到底哪里做错了，如果有人能帮助我，那就太好了，谢谢

Map response

Answer 1

“Leela Palace Bengaluru, HAL Airport Road, ISRO Colony, Bengaluru, Karnataka, India”是一个地方，而不是邮政地址。当您将该字符串发送到地理编码器时，您会得到“Leela Palace Rd, HAL 3rd Stage, Bengaluru, Karnataka, India (12.9619947, 77.64936599999999)”的结果

• The geocoder is for postal addresses.
• The Places API/library is for places.

距离服务将地理编码器用于字符串，如果您给它一个地点 ID，它将使用该地址作为目的地。

使用place id finder，“Leela Palace Bengaluru”的地点 ID 是：

班加罗尔里拉宫

地点 ID：ChIJ3ZvKfAYUrjsRGuckzDe-GxE

23, HAL Airport Rd, ISRO Colony, Domlur, Bengaluru, Karnataka 560008, India

您可以将其用于 DirectionsService 的目的地。

proof of concept fiddle

代码 sn-p：

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var start = "Jogupalya, Karnataka, India";
  var dest1 = {
    placeId: "ChIJ3ZvKfAYUrjsRGuckzDe-GxE"
  };
  var request = {
    origin: start,
    destination: dest1,
    travelMode: google.maps.TravelMode.DRIVING
  }
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay1 = new google.maps.DirectionsRenderer({
    map: map,
    preserveViewport: true
  });
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay1.setDirections(response);
      map.setCenter(response.routes[0].legs[0].end_location);
      map.setZoom(16);
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>