Fixed Marker in der Mitte und Drag-Karte, um lat, lang

Question

Ich bin ein Beispiel-Karte zeigt den aktuellen Standort mit dem Klick auf eine Schaltfläche zeigt lat, lang, und Marker auf der Karte ist ziehbar, lat aktualisieren, lang, aber Ich brauche eine kleine Änderung auf der Karte

Ich möchte, dass der Marker auf der Mitte der Karte und die Karte zu ziehbaren sein, um neue lat, long wie JSFIDDLE link zu bekommen.

Mein Code ist:

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

Wenn Sie die zentrierte Marker aus der jsfiddle you reference wollen, müssen Sie von dort den Code enthalten (und der damit verbundenen 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; 
} 

Wenn Sie die Breiten- und Längen wollen mit den Koordinaten dieser Markierung aufgefüllt werden (die Mitte der Karte), müssen Sie diesen Code hinzufügen:

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

vollständigen Code-Schnipsel:

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