个人中心
gpt4 book ai didi

javascript - 在不使用computeheading的情况下从Google map URL查找正确的街景

转载 作者：行者123 更新时间：2023-12-02 16:01:16 25 4
gpt4 key购买 nike

我正在使用 Geocodezip 之前的答案中的computeHeading 代码，它大部分工作正常，但有一些问题，这不是 Geocodezips 的错误。变量“heading”接收computeHeading结果，该数据定位谷歌地图街景的标题 View ，如下所示:

var heading = google.maps.geometry.spherical.computeHeading(panorama.getPosition(), marker.getPosition());
  panorama.setPov({
  heading: heading,
  zoom: 1,
  pitch: 0
});
});

然而，这并不总是准确的。我想要实现的是将标题值从 Google map URL 传递到变量“标题”。我可以去掉标题值，从 XML 文件中解析它，然后在工作 map 的信息窗口中回显结果。如果复制并粘贴下面的代码，您可以看到该过程以 100% 运行，但由于computeHeading，POV(视角)略有偏离(您需要旋转街景)，但是当我尝试传递该值时变量“NEWHEADING”到“标题”的值未被读取，并且 POV 缺陷为默认北...换句话说“0”。我尝试过“重新安排”代码流程，但没有成功。

我已在 JSHint 和 JSLint 以及控制台中验证了此代码

任何地方都没有这个想法的有效示例，我已经通过所有谷歌搜索到第 30 页。我看到的所有其他示例都使用了我不想使用的computeHeading。我想使用解析后的 XML 中的 NEWHEADING 变量的值作为标题来创建正确的 StreetView POV。我希望我已经说得足够清楚了，任何帮助和建议都将不胜感激。

<html>
<head>
<style>
#map {
  height: 400px;
  width: 700px;
  margin: 0px;
  padding: 0px
}
</style>

<script src="http://maps.google.com/maps/api/js?v=3&libraries=visualization,places,geometry" type="text/javascript"></script>
<script type="text/javascript">

var side_bar_html = "";
var gmarkers = [];
var myLatlng = new google.maps.LatLng(21.13962399, -86.8928956);
var panorama;
var myOptions = {
  zoom: 14,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
var infoWindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();

function createMarker(point, map, infoWindow, html, CompanyName) {
var marker = new google.maps.Marker({
  position: point,
  map: map,
  title: CompanyName
});
google.maps.event.addListener(marker, 'click', function() {
panorama = map.getStreetView();
panorama.setPosition(marker.getPosition());
google.maps.event.addListenerOnce(panorama, 'status_changed', function() {
  var heading = google.maps.geometry.spherical.computeHeading(panorama.getPosition(), marker.getPosition());
  panorama.setPov({
    heading: heading,
    zoom: 1,
    pitch: 0
  });
});
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
bounds.extend(point);
gmarkers.push(marker);
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + CompanyName + '<\/a><br>';
return marker;
}

function initialize() {
var map = new google.maps.Map(document.getElementById("map"), myOptions);

var xmlDoc = xmlParse(xmlStr);
var markers = xmlDoc.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
  var CompanyName = markers[i].getAttribute("CompanyName");
  var CompanyDescription = markers[i].getAttribute("CompanyDescription");
  var CompanyTelephone = markers[i].getAttribute("CompanyTelephone");
  var NEWHEADING = parseFloat(markers[i].getAttribute("StreetView"));
  var point = new google.maps.LatLng(
    parseFloat(markers[i].getAttribute("lat")),
    parseFloat(markers[i].getAttribute("lng")));
    var html = "<H3>" + CompanyName + "</H3>" + CompanyDescription + "<BR>Tel: " + CompanyTelephone + "<BR><B>New Heading: " + NEWHEADING + "</B><BR>";
html += '<br /><input type="button" onclick="toggleStreetView();" value="See Street View" />';
    var marker = createMarker(point, map, infoWindow, html, CompanyName);
  }
document.getElementById("side_bar").innerHTML = side_bar_html;
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle === false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
  var doc = new ActiveXObject('Microsoft.XMLDOM');
  doc.loadXML(str);
  return doc;
}

if (typeof DOMParser != 'undefined') {
  return (new DOMParser()).parseFromString(str, 'text/xml');
}

return createElement('div', null);
}
var xmlStr = '<?xml version="1.0" encoding="UTF-8"?><markers><marker CompanyName="MCDONALDS" CompanyDescription="Tasty Hamburgers To Go" lat="21.141406" lng="-86.83339" StreetView="15.26" CompanyTelephone="01 998 893 6767"/><marker CompanyName="LITTLE CAESARS" CompanyDescription="Best Pizzas Anywhere" lat="21.161016" lng="-86.850647" StreetView="233.56" CompanyTelephone="01 998 893 6767"/><marker CompanyName="VIPS" CompanyDescription="Tasty Food" lat="21.113087" lng="-86.838704" StreetView="320.13" CompanyTelephone="+52 998 843 6666"/></markers>';
</script>
</head>

<body>
<div style="border: 2px solid #3872ac;" id="map"></div>
<div id="side_bar"></div>
<p>Below are the real Streetview URL's with the same HEADING values that are passed to the variable "NEWHEADING"</p>
<a href="https://www.google.com.mx/maps/@21.141406,-86.83339,3a,75y,15.26h,90t/data=!3m4!1e1!3m2!1scugaDFoU9Zhym3_IwhMKgQ!2e0!4m2!3m1!1s0x0:0xfde8520f397fad4b!6m1!1e1">McDonalds</a>
<BR>
<a href="https://www.google.com/maps/@21.161016,-86.850647,3a,75y,233.56h,90t/data=!3m4!1e1!3m2!1sjODIp985qSnPK1noHruiCw!2e0!4m2!3m1!1s0x0:0xc90acf0749a704b!6m1!1e1">Caesars Pizza</a>
<BR>
<a href="https://www.google.com.mx/maps/@21.113087,-86.838704,3a,75y,320.13h,96.48t/data=!3m4!1e1!3m2!1sZWlO1UlMwAuqAL0zEYY_zQ!2e0!6m1!1e1">Vips</a>
</body>
</html>

最佳答案

将所需的标题传递到 createMarker 函数中并使用它，而不是根据街景全景位置和“查看”位置计算它。

function createMarker(point, map, infoWindow, html, CompanyName, heading) {
    var marker = new google.maps.Marker({
        position: point,
        map: map,
        title: CompanyName
    });
    google.maps.event.addListener(marker, 'click', function () {
        panorama = map.getStreetView();
        panorama.setPosition(marker.getPosition());
        google.maps.event.addListenerOnce(panorama, 'status_changed', function () {
            panorama.setPov({
                heading: heading,
                zoom: 1,
                pitch: 0
            });
        });
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
    });
    bounds.extend(point);
    gmarkers.push(marker);
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + CompanyName + '<\/a><br>';
    return marker;
}

working fiddle

代码片段:

var side_bar_html = "";
var gmarkers = [];
var myLatlng = new google.maps.LatLng(21.13962399, -86.8928956);
var panorama;
var myOptions = {
  zoom: 14,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}
var infoWindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();

function createMarker(point, map, infoWindow, html, CompanyName, heading) {
  var marker = new google.maps.Marker({
    position: point,
    map: map,
    title: CompanyName
  });
  google.maps.event.addListener(marker, 'click', function() {
    panorama = map.getStreetView();
    panorama.setPosition(marker.getPosition());
    google.maps.event.addListenerOnce(panorama, 'status_changed', function() {
      panorama.setPov({
        heading: heading,
        zoom: 1,
        pitch: 0
      });
    });
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
  bounds.extend(point);
  gmarkers.push(marker);
  side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + CompanyName + '<\/a><br>';
  return marker;
}

function initialize() {
  var map = new google.maps.Map(document.getElementById("map"), myOptions);

  var xmlDoc = xmlParse(xmlStr);
  var markers = xmlDoc.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var CompanyName = markers[i].getAttribute("CompanyName");
    var CompanyDescription = markers[i].getAttribute("CompanyDescription");
    var CompanyTelephone = markers[i].getAttribute("CompanyTelephone");
    var NEWHEADING = parseFloat(markers[i].getAttribute("StreetView"));
    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
    var html = "<H3>" + CompanyName + "</H3>" + CompanyDescription + "<BR>Tel: " + CompanyTelephone + "<BR><B>New Heading: " + NEWHEADING + "</B><BR>";
    html += '<br /><input type="button" onclick="toggleStreetView();" value="See Street View" />';
    var marker = createMarker(point, map, infoWindow, html, CompanyName, NEWHEADING);
  }
  document.getElementById("side_bar").innerHTML = side_bar_html;
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle === false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}
var xmlStr = '<?xml version="1.0" encoding="UTF-8"?><markers><marker CompanyName="MCDONALDS" CompanyDescription="Tasty Hamburgers To Go" lat="21.141406" lng="-86.83339" StreetView="15.26" CompanyTelephone="01 998 893 6767"/><marker CompanyName="LITTLE CAESARS" CompanyDescription="Best Pizzas Anywhere" lat="21.161016" lng="-86.850647" StreetView="233.56" CompanyTelephone="01 998 893 6767"/><marker CompanyName="VIPS" CompanyDescription="Tasty Food" lat="21.113087" lng="-86.838704" StreetView="320.13" CompanyTelephone="+52 998 843 6666"/></markers>';
#map {
  height: 400px;
  width: 700px;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div style="border: 2px solid #3872ac;" id="map"></div>
<div id="side_bar"></div>
<p>Below are the real Streetview URL's with the same HEADING values that are passed to the variable "NEWHEADING"</p> <a href="https://www.google.com.mx/maps/@21.141406,-86.83339,3a,75y,15.26h,90t/data=!3m4!1e1!3m2!1scugaDFoU9Zhym3_IwhMKgQ!2e0!4m2!3m1!1s0x0:0xfde8520f397fad4b!6m1!1e1">McDonalds</a>

<BR>
<a href="https://www.google.com/maps/@21.161016,-86.850647,3a,75y,233.56h,90t/data=!3m4!1e1!3m2!1sjODIp985qSnPK1noHruiCw!2e0!4m2!3m1!1s0x0:0xc90acf0749a704b!6m1!1e1">Caesars Pizza</a>

<BR> <a href="https://www.google.com.mx/maps/@21.113087,-86.838704,3a,75y,320.13h,96.48t/data=!3m4!1e1!3m2!1sZWlO1UlMwAuqAL0zEYY_zQ!2e0!6m1!1e1">Vips</a>

关于javascript - 在不使用computeheading的情况下从Google map URL查找正确的街景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31170135/

25 4 0
文章推荐： 多个多语言网站的 Magento 产品翻译
文章推荐： r - 使用正则表达式有条件地过滤多列以选择colnames R
文章推荐： f# - fparsec - 限制应用解析器的字符数
文章推荐： javascript - Angular 图表无法让标签按我需要的方式工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com