谷歌地图api添加按钮可使用geolocationmarker-compiled.js平移回用户位置 [英] google maps api add button to pan back to user location using geolocationmarker-compiled.js

问题描述

这是我的代码...，我正在使用../geolocationmarker-compiled.js查找用户位置.

Here is my code... and i'm using ../geolocationmarker-compiled.js to find the user location.

http://deepfrogphoto.com/Brett-Pelletier-Photography/Links/maps/wasatch-ski-map-mobile.htm

如果用户在地图上滚动并想要返回到自己的位置(漂亮的蓝色圆点)，我希望添加一个按钮来将其平移(居中)到用户位置(如果有).有人可以帮我吗?我不知道我在做什么，但到目前为止，所有这些都可以正常工作.我将不胜感激，添加一个可以平移回用户位置的按钮.感谢您提前提供的帮助...

I would love to add a button that pans (centers) back to the user location if they scroll around on the map and want to go back to their location (the nice blue dot) Can anyone help me out? I have no idea what I'm doing, but got all this to work somehow so far. I would be forever grateful to add a button that will pan back to the user location. Thanks for any help ahead of time...

var map, GeoMarker;      

function toggleLayer(this_layer){
  if(this_layer.getMap()) {
    this_layer.setMap(null)
  } else {
    this_layer.setMap(map);
  }
}

function initialize() {
  var mapOptions = {
      zoom: 20,
      center: new google.maps.LatLng(40.563855, -111.675426),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };

  map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);

  GeoMarker = new GeolocationMarker();
  GeoMarker.setCircleOptions({fillColor: '#808080'});

  google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() {
    map.setCenter(this.getPosition());
    map.fitBounds(this.getBounds());
  });

  google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
    alert('There was an error obtaining your position. Message: ' + e.message);
  });

  GeoMarker.setMap(map);

  trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map); 

  layer1 = new google.maps.FusionTablesLayer({
    map: map,
    heatmap: { enabled: false },
    query: {
      select: "skilines",
      from: "1R5pCEyNN74N8Dt9MkfNXA6A9D1HbQESzOR1fYFa7",
      where: ""
    },
    options: {
      styleId: 2,
      templateId: 2
    }
  });   

  layer2 = new google.maps.FusionTablesLayer({
    map: map,
    heatmap: { enabled: false },
    query: {
      select: "resorts",
      from: "19iu58FDFcBIZZ-wU1iZcf89AI5ABDJ7YTv355su5",
      where: ""
    },
    options: {
      styleId: 2,
      templateId: 2
    }
  });      

  layer3 = new google.maps.FusionTablesLayer({
    map: map,
    heatmap: { enabled: false },
    query: {
      select: "summerhiking",
      from: "1t1XNnG7J7Zu1p5mIUpm6qIGVYwzhkCgPy_je0IKr",
      where: ""
    },
    options: {
      styleId: 2,
      templateId: 2
    }
  });       
}

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

if(!navigator.geolocation) {
  alert('Your browser does not support geolocation');
}

推荐答案

您可以像这样在GeoMarker上重新放置地图:

you can recenter the map on the GeoMarker like this:

map.setCenter(GeoMarker.getPosition());

工作代码段:

var map, GeoMarker;

function toggleLayer(this_layer) {
  if (this_layer.getMap()) {
    this_layer.setMap(null)
  } else {
    this_layer.setMap(map);
  }
}

function originalCenter() {
  map.setCenter(new google.maps.LatLng(40.563855, -111.675426));
}

function recenterMapOnGeoLoc() {
  map.setCenter(GeoMarker.getPosition());
}

function initialize() {
  var mapOptions = {
    zoom: 20,
    center: new google.maps.LatLng(40.563855, -111.675426),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

  GeoMarker = new GeolocationMarker();
  GeoMarker.setCircleOptions({
    fillColor: '#808080'
  });

  google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() {
    map.setCenter(this.getPosition());
    map.fitBounds(this.getBounds());
  });

  google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
    alert('There was an error obtaining your position. Message: ' + e.message);
  });

  GeoMarker.setMap(map);

  trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);

  layer1 = new google.maps.FusionTablesLayer({
    map: map,
    heatmap: {
      enabled: false
    },
    query: {
      select: "skilines",
      from: "1R5pCEyNN74N8Dt9MkfNXA6A9D1HbQESzOR1fYFa7",
      where: ""
    },
    options: {
      styleId: 2,
      templateId: 2
    }
  });

  layer2 = new google.maps.FusionTablesLayer({
    map: map,
    heatmap: {
      enabled: false
    },
    query: {
      select: "resorts",
      from: "19iu58FDFcBIZZ-wU1iZcf89AI5ABDJ7YTv355su5",
      where: ""
    },
    options: {
      styleId: 2,
      templateId: 2
    }
  });

  layer3 = new google.maps.FusionTablesLayer({
    map: map,
    heatmap: {
      enabled: false
    },
    query: {
      select: "summerhiking",
      from: "1t1XNnG7J7Zu1p5mIUpm6qIGVYwzhkCgPy_je0IKr",
      where: ""
    },
    options: {
      styleId: 2,
      templateId: 2
    }
  });
}

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

if (!navigator.geolocation) {
  alert('Your browser does not support geolocation');
}

html,
body,
#map_canvas {
  width: 100%;
  height: 100%;
}

<script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@master/archive/geolocationmarker/src/geolocationmarker.js"></script>
<input type="button" id="recenter" onclick="recenterMapOnGeoLoc();" value="recenter" />
<input type="button" id="original" onclick="originalCenter();" value="original center" />
<div id="map_canvas"></div>

正在使用jsfiddle

这篇关于谷歌地图api添加按钮可使用geolocationmarker-compiled.js平移回用户位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！