我如何从另一个网页(带有 url)跳转到特定的 LatLong 或我自己创建的 google 地图(v3 JS API)上的标记?

How can i jump from another web page (with an url) to a specific LatLong or to a marker on my self-created google maps (v3 JS API)?

我找到了一个简单的例子,但这只适用于地图和 link 在同一页面上的情况。

HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,visualization,drawing,places"></script>

  <script type="text/javascript">
    function initialize() {
      var latlng = new google.maps.LatLng(51.522387,-0.173501);
      var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

      var marker2 = new google.maps.Marker(
        {
          position: new google.maps.LatLng(51.5262405, -0.074549),
          map: map,
          title: "my 2nd title"
        }
      );

      google.maps.event.addDomListener(
        document.getElementById("marker2"), "click", function() {
          map.setCenter(marker2.getPosition());
          return false;
        }
      );
    }

  </script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:310px; height:260px"></div>
<a href="#" id="marker2">Second place</a>
</body>
</html>

有没有办法从另一个网站跳到特定位置 (LatLong) 或直接跳到带有 marker.getPosition() 的标记到我自己创建的 GM 地图?

也许有锚点?例如:http://www.example.com/map#marker2

此处示例从 URL jquery get querystring from URL

获取查询值

使用它来插入您的代码并使用

map.setCenter(new gooogle.map.latlng(0,0));

用于将中心地图设置为标记的位置

解析location.hash得到想要的值

var hash=location.hash.substr(1);

要触发点击,请使用 link 的 ID(例如 #marker2)。

我建议使用 ID 为可点击 link 的列表以防止滥用:

     if(['marker2']//array with IDs of clickable links
        .indexOf(hash)>-1){
       google.maps.event.trigger( document.getElementById(hash),'click');
     }

演示:http://run.plnkr.co/plunks/ia7uUFOuG5L1tzsrayw3/#marker2


对于 latLng,您可以使用逗号分隔的纬度和经度:#52.549,13.425

用逗号分割字符串,验证数字(纬度必须在 -85 到 85 之间,经度必须在 -180 到 180 之间)

验证成功后,根据值创建 LatLng,并使用 LatLng 作为参数调用 map.setCenter

演示:http://run.plnkr.co/plunks/ia7uUFOuG5L1tzsrayw3/#52.549,13.425


完整代码(运行它在initialize末尾):

  (function(h) {

    var hash = String(h),
      latLng = {};
    if (!!hash) {
      hash = hash.substr(1);
      if (['marker2'] //array with IDs of clickable links
        .indexOf(hash) > -1) {
        google.maps.event.trigger(document.getElementById(hash), 'click');
      } else {
        hash = hash.split(',');
        if (hash.length == 2) {
          [
            ['lat', 85],
            ['lng', 180]
          ].forEach(function(o, i) {
            if (!latLng || isNaN(hash[i]) || Math.abs(hash[i]) > o[1]) {
              latLng = null;
              return;
            }
            latLng[o[0]] = parseFloat(hash[i]);
            if (i === 1) {
              map.setCenter(latLng);
            }
          });
        }
      }
    }
  }(location.hash));