从 Google Map URL 加载地图到 ExtJS GMapPanel答案

【问题标题】：Load map to ExtJS GMapPanel from Google Map URL从 Google Map URL 加载地图到 ExtJS GMapPanel
【发布时间】：2015-08-26 09:43:11
【问题描述】：

我正在寻找从 URL（例如https://www.google.pl/maps/@52.4796828,13.3844559,11z?hl=en）加载地图到 GMapPanel ExtJS 控件的解决方案。此链接创建于http://maps.google.com 网站。尽管进行了大量研究，但这似乎是不可能的。

您对如何以这种方式（从 URL）加载地图有任何想法吗？您知道实施此解决方案的其他方法吗？

【问题讨论】：

标签： javascript google-maps url extjs

【解决方案1】：

我不知道 Google 如何使用 URL 中的 @ 符号来做到这一点。

但我可以用标签来做到这一点。

    <div id="map"></div>

<a target="_blank" href="index.php#48.86100157399595,2.335891842842086,7">Paris</a>
<a target="_blank" href="index.php#52.52147002033347,13.413565278053268,9">Berlin</a>
<a target="_blank" href="index.php#50.847982072140276,4.350390947438103,12">Brussels</a>

<style>
#map {
  height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var map;

// reads the url, sets the map according to these values
function optionsFromUrl() {
  var settings = getLatLngZoom();
  if (settings) {
    map.setCenter( new google.maps.LatLng(settings[0], settings[1]) );
    map.setZoom( settings[2] );
  }
}
// reads the url, returns an array of values.  These values are separated by kommas in the url
function getLatLngZoom() {
  var vars = window.location.hash.substr(1).split(',');
  if (vars[0] && vars[1]) {
    return [
      Number(vars[0]),
      Number(vars[1]),
      Number(vars[2]) || 7  // this is a default zoom, in case it is missing in the URL.  Feel free to pick another value
    ];
  }
  return null;
}

function initialize() {
  var paris = new google.maps.LatLng(48.86100157399595,2.335891842842086);
  var mapOptions = {
    zoom: 7,
    center: paris
  }
  map = new google.maps.Map(document.getElementById("map"), mapOptions);

  optionsFromUrl();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

【讨论】：