谷歌地图标记不固定

Karnataka

关注

发信

关注(28)粉丝(399)

谷歌地图标记不固定

本文介绍了谷歌地图标记不固定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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);
  }
});

I am finding a location using google API and then calculating the distance between the searched place and the particular hotel which is coming from my data base, In image you can see i have searched for route map and distance for "Leela Palace Bengaluru, HAL Airport Road, ISRO Colony, Bengaluru, Karnataka, India" to my hotel which is coming from data base,as you can see the marker is not exactly pinning on leela palace instead it is showing next to the leela palace that is marked as B in image. I don't know where exactly i have done wrong it would be great if someone can help me with this thank you

Map response

解决方案

"Leela Palace Bengaluru, HAL Airport Road, ISRO Colony, Bengaluru, Karnataka, India" is a place, not a postal address. When you send that string to the geocoder you get a result for "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.

The distance service uses the geocoder for strings, if you give it a place ID, it will use that for the destination.

Using the place id finder, the place id for "Leela Palace Bengaluru" is:

You can use that for the destination of the DirectionsService.

proof of concept fiddle

code snippet:

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>

这篇关于谷歌地图标记不固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-02 01:24