谷歌地图标记不固定 [英] google map marker is not pinning properly
问题描述
代码：
var dest1 = document.getElementById（'textbox1'）。value;
var request = {
origin：start，
destination：dest1，
travelMode：google.maps.TravelMode [selectedMode]
}
方向服务路由（请求，函数（响应，状态）{
if（status == google.maps.DirectionsStatus.OK）{
directionsDisplay1.setDirections（response）;
}
}）;
我使用google API找到一个位置，然后计算搜索到的位置与特定酒店之间的距离这是来自我的数据库，在图像你可以看到我已经搜索了里拉宫班加罗尔，HAL机场路，ISRO殖民地，班加罗尔，卡纳塔克邦，印度的路线图和距离到我的酒店，这是来自数据库，因为您可以看到标记不是完全固定在leela宫殿上，而是显示在图像中标记为B的leela宫殿旁边。我不知道我在哪里做错了，如果有人可以帮助我，谢谢你
Leela Palace班加罗尔，HAL机场路，ISRO殖民地，班加罗尔，卡纳塔克邦，印度是一个地方，而不是邮寄地址。当您将该字符串发送到地理编码器时，您会得到印度卡纳塔克邦班加罗尔HAL 3rd Stage的Leela Palace Rd的结果（12.9619947，77.64936599999999）
li>
距离服务使用字符串的地理编码器，如果您给它一个地点ID，它将使用它作为目的地。
使用放置ID Leela Palace Bengaluru的地点编号为：
The Leela Palace Bengaluru
地点ID：ChIJ3ZvKfAYUrjsRGuckzDe-GxE
23，HAL Airport Rd，ISRO Colony，Domlur，Bengaluru，Karnataka 560008，India
您可以将它用于DirectionsService的目的地。
代码段：
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，卡纳塔克邦，印度; 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％;宽度：100％; margin：0px; < script src =https：//
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
"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 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:
The Leela Palace Bengaluru
Place ID: ChIJ3ZvKfAYUrjsRGuckzDe-GxE
23, HAL Airport Rd, ISRO Colony, Domlur, Bengaluru, Karnataka 560008, India
You can use that for the destination of the DirectionsService.
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>
这篇关于谷歌地图标记不固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
