固定中心的标记和拖动地图以获得lat，long

我是一个示例地图显示当前位置，点击一个按钮显示lat，long和地图上的标记可拖动更新lat，long，但我需要在地图上稍作修改

我希望标记固定在地图的中心，地图可以拖动以获得新的lat，就像JSFIDDLE链接一样 。

我的代码是：

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

Answer 1

如果你想要你引用的jsfiddle中的中心标记，你需要从那里包含这个代码（及其相关的CSS）：

码：

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

如果您希望使用该标记的坐标（地图中心）填充纬度和经度，则需要添加以下代码：

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

概念certificate小提琴

完整的代码段：

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