javascript - 固定标记在中心并拖动 map 以获得纬度，经度

Question

我是一个示例 map ，通过单击按钮显示当前位置显示经纬度， map 上的标记可拖动以更新经纬度，但我需要在 map 上进行一些更改

我希望标记固定在 map 的中心， map 可以拖动以获得新的纬度，长如 JSFIDDLE link .

我的代码是:

var map = null;
var marker;

function showlocation() {
  // One-shot position request.
  navigator.geolocation.getCurrentPosition(callback);
}
 
function callback(position) {

  if (marker != null) {
    marker.setMap(null);
  }

  var geocoder = new google.maps.Geocoder();
  var lat = position.coords.latitude;
  var lon = position.coords.longitude;
  document.getElementById('default_latitude').value = lat;
  document.getElementById('default_longitude').value = lon;
  var latLong = new google.maps.LatLng(lat, lon);
  marker = new google.maps.Marker({
    position: latLong,
    draggable: true
  });
  marker.setMap(map);
  map.setZoom(16);
  map.setCenter(marker.getPosition());

  google.maps.event.addListener(marker, 'dragend', function() {
    geocoder.geocode({
      'latLng': marker.getPosition()
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[0]) {
          $('#default_latitude').val(marker.getPosition().lat());
          $('#default_longitude').val(marker.getPosition().lng());
        }
      }
    });
  });

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



function initMap() {
  var mapOptions = {
    center: new google.maps.LatLng(0, 0),
    zoom: 1,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" class="btn  pull-right map-btn" value="btn " onclick="javascript:showlocation()" />

<div id="map-canvas" style="height: 300px"></div>

<input type="text" id="default_latitude" placeholder="Latitude" />
<input type="text" id="default_longitude" placeholder="Longitude" />

Answer 1

如果你想要来自 jsfiddle you reference 的居中标记，您需要从那里包含此代码(及其关联的 CSS):

代码:

$('<div/>').addClass('centerMarker').appendTo(map.getDiv())
//do something onclick
.click(function() {
    var that = $(this);
    if (!that.data('win')) {
      that.data('win', new google.maps.InfoWindow({
        content: 'this is the center'
      }));
      that.data('win').bindTo('position', map, 'center');
    }
    that.data('win').open(map);
});

CSS:

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

#map_canvas .centerMarker {
  position: absolute;
  /*url of the marker*/
  background: url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;
  /*center the marker*/
  top: 50%;
  left: 50%;
  z-index: 1;
  /*fix offset when needed*/
  margin-left: -10px;
  margin-top: -34px;
  /*size of the image*/
  height: 34px;
  width: 20px;
  cursor: pointer;
}

如果您希望用该标记( map 中心)的坐标填充纬度和经度，则需要添加以下代码:

google.maps.event.addListener(map,'center_changed', function() {
  document.getElementById('default_latitude').value = map.getCenter().lat();
  document.getElementById('default_longitude').value = map.getCenter().lng();
});

proof of concept fiddle

完整代码片段:

var map = null;
var marker;

function showlocation() {
  if ("geolocation" in navigator) {
    /* geolocation is available */
    // One-shot position request.
    navigator.geolocation.getCurrentPosition(callback, error);
  } else {
    /* geolocation IS NOT available */
    console.warn("geolocation IS NOT available");
  }
}

function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
};

function callback(position) {

  var lat = position.coords.latitude;
  var lon = position.coords.longitude;
  document.getElementById('default_latitude').value = lat;
  document.getElementById('default_longitude').value = lon;
  var latLong = new google.maps.LatLng(lat, lon);
  map.setZoom(16);
  map.setCenter(latLong);
}
google.maps.event.addDomListener(window, 'load', initMap);



function initMap() {
  var mapOptions = {
    center: new google.maps.LatLng(0, 0),
    zoom: 1,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);
  google.maps.event.addListener(map, 'center_changed', function() {
    document.getElementById('default_latitude').value = map.getCenter().lat();
    document.getElementById('default_longitude').value = map.getCenter().lng();
  });
  $('<div/>').addClass('centerMarker').appendTo(map.getDiv())
    //do something onclick
    .click(function() {
      var that = $(this);
      if (!that.data('win')) {
        that.data('win', new google.maps.InfoWindow({
          content: 'this is the center'
        }));
        that.data('win').bindTo('position', map, 'center');
      }
      that.data('win').open(map);
    });
}

body,
html,
#map-canvas {
  height: 100%;
  margin: 0;
}

#map-canvas .centerMarker {
  position: absolute;
  /*url of the marker*/
  background: url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;
  /*center the marker*/
  top: 50%;
  left: 50%;
  z-index: 1;
  /*fix offset when needed*/
  margin-left: -10px;
  margin-top: -34px;
  /*size of the image*/
  height: 34px;
  width: 20px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="button" class="btn  pull-right map-btn" value="btn " onclick="javascript:showlocation()" />

<div id="map-canvas" style="height: 300px"></div>

<input type="text" id="default_latitude" placeholder="Latitude" />
<input type="text" id="default_longitude" placeholder="Longitude" />