0

我正在尝试将地理位置添加到自定义的公共谷歌地图，但我无法让它工作。例如这里是一个自定义的公共谷歌地图。

假设我想向该地图添加地理定位。我在直接从谷歌地图 API 网站关闭的网站上有以下内容：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

以及我刚刚将“.getElementsById”更改为“.getElementsByClassName”的以下内容：

    <script type="text/javascript">
var map;

function initialize() {
  var mapOptions = {
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementsByClassName('map-canvas'),
      mapOptions);

  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

然后我调用灯箱中的地图：

<a href="https://maps.google.ca/maps/ms?msa=0&msid=202458571791405992786.0004b9061a3fcd9461d42&lightbox[width]=70p&lightbox[height]=70p" class="map-canvas lightbox"><h2 class="dis">Where can I<br />get Rumble?</h2></a>

它可以很好地显示地图，并要求进行地理定位，但我认为它无法在此地图上工作的原因是因为它未包含在 API 中。

我希望有人对此有解决方案。

4

1 回答 1

1

这不是基于 API 的地图。您可以在基于API 的地图上显示该地图的 KML

然后使用您的地理位置代码将地图居中（根据排序，您可能需要使用 KmlLayer 上的 preserveViewport:true 选项）。下面的相关代码，请参阅文档以获取更多示例和信息。

这是在您现有的页面中（保留您的版本）

var myOptions = {
    zoom: 5,
    center: new google.maps.LatLng(0,0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

添加此项以显示“自定义地图”中的数据：

var kmlLayer = new google.maps.KmlLayer("https://maps.google.ca/maps/ms?ie=UTF8&msa=0&output=kml&msid=202458571791405992786.0004b9061a3fcd9461d42");
kmlLayer.setMap(map);
于 2013-07-02T18:12:48.613 回答