固定标记在中心并拖动地图以获得经纬度 [英] Fixed marker in center and drag map to get lat,long

问题描述

我是一个示例地图，单击按钮即可显示当前位置，显示 lat,long ，并且地图上的标记可拖动以更新 lat,long，但我需要对地图进行一些更改

我希望标记固定在地图的中心，并且地图可以拖动以获得新的纬度，长如

完整的代码片段:

var map = null;var 标记；函数显示位置(){如果(导航器中的地理位置"){/* 地理定位可用 *///一次性位置请求.navigator.geolocation.getCurrentPosition(回调，错误)；} 别的 {/* 地理定位不可用 */console.warn("地理位置不可用");}}函数错误(错误){console.warn('ERROR(' + err.code + '): ' + err.message);};函数回调(位置){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);地图.setZoom(16);map.setCenter(latLong);}google.maps.event.addDomListener(window, 'load', initMap);函数 initMap() {var mapOptions = {中心:新的 google.maps.LatLng(0, 0)，缩放:1，mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("map-canvas"),地图选项);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())//在点击时做一些事情.click(函数(){var that = $(this);如果 (!that.data('win')) {that.data('win', new google.maps.InfoWindow({内容:'这是中心'}));that.data('win').bindTo('position', map, 'center');}that.data('win').open(map);});}

body,html,#地图画布{高度:100%；边距:0；}#map-canvas .centerMarker {位置:绝对；/*标记的url*/背景: url(http://maps.gstatic.com/mapfiles/markers2/marker.png) 不重复；/*居中标记*/顶部:50%；左:50%；z-索引:1；/*在需要时修复偏移*/左边距:-10px；边距顶部:-34px；/*图像大小*/高度:34px；宽度:20px；光标:指针；}

<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"/>

I'm an example map shows the current location with the click of a button shows lat,long ,and marker on the map is draggable to update lat,long, But I need a little change on the map

I would like the marker be to fixed on the center of the map and the map to be draggable to get new lat,long like JSFIDDLE link.

My code is :

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" />

解决方案

If you want the centered marker from the jsfiddle you reference, you need to include this code from there (and its associated CSS):

Code:

$('<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;
}

If you want the latitude and longitude to be populated with the coordinates of that marker (the center of the map), you need to add this code:

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

complete code snippet:

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" />

这篇关于固定标记在中心并拖动地图以获得经纬度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！