Question

我正在尝试将地理位置添加到自定义公共谷歌地图，我无法让它工作。 For example here is a custom public google map

让我们说我想为地图添加地理定位。我在网站上有以下内容，该网站直接位于谷歌地图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中。

我希望有人能为此解决问题。

Answer 1

This不是基于API的地图。您可以在API based map

上显示该地图中的KML

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

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

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);

地理位置添加到标准自定义谷歌地图

1 个答案: