Google Maps Api单击以添加地图点

Question

当我点击谷歌地图时如何添加点？

因此，当我单击地图时，我想添加一个指针，但是我不能。

在此过程中，我从地图上获取了LAT LANG值，并将其传输到输入中。 然后，我填写必填字段并填写表格。 但是，当我单击地图时，它没有放置指针。

JSFiddle： https ：//jsfiddle.net/Lzycb8c0/6/

JS代码：

var lat = 41.013995; //default latitude
var lng = 28.979741; //default longitude
var homeLatlng = new google.maps.LatLng(lat, lng); //set default coordinates
var homeMarker = new google.maps.Marker({ //set marker
    position: homeLatlng, //set marker position equal to the default coordinates
    map: map, //set map to be used by the marker
    draggable: true //make the marker draggable
});

var geocoder = new google.maps.Geocoder;

var myOptions = {
    center: new google.maps.LatLng(41.013995, 28.979741), //set map center
    zoom: 17, //set zoom level to 17
    mapTypeId: google.maps.MapTypeId.ROADMAP //set map type to road map
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions); //initialize the map

var marker = new google.maps.Marker({
    draggable: true,
    position: homeLatlng,
    map: map,
    title: "Your location"
});




google.maps.event.addListener(map, 'click', function (event) {


    document.getElementById("lat").value = event.latLng.lat();
    document.getElementById("long").value = event.latLng.lng();

    // Reverse geo code using latLng
    geocoder.geocode({'location': event.latLng }, function(results, status) {

        if (status === 'OK') {
            if (results[0]) {
                $('#search_new_places').val( results[0].formatted_address );
            } else {
                window.alert('No results found');
            }

        } else {
            window.alert('Geocoder failed due to: ' + status);
        }

    });

});

//if the position of the marker changes set latitude and longitude to
//current position of the marker
google.maps.event.addListener(homeMarker, 'position_changed', function(){
    var lat = homeMarker.getPosition().lat(); //set lat current latitude where the marker is plotted
    var lng = homeMarker.getPosition().lng(); //set lat current longitude where the marker is plotted

});




//if the center of the map has changed
google.maps.event.addListener(map, 'center_changed', function(){
    var lat = homeMarker.getPosition().lat(); //set lat to current latitude where the marker is plotted
    var lng = homeMarker.getPosition().lng(); //set lng current latitude where the marker is plotted
    draggable: true;
});


var input = document.getElementById('search_new_places'); //get element to use as input for autocomplete
var autocomplete = new google.maps.places.Autocomplete(input); //set it as the input for autocomplete

autocomplete.bindTo('bounds', map); //bias the results to the maps viewport

//executed when a place is selected from the search field
google.maps.event.addListener(autocomplete, 'place_changed', function(){

    //get information about the selected place in the autocomplete text field
    var place = autocomplete.getPlace();

    if (place.geometry.viewport){ //for places within the default view port (continents, countries)
        map.fitBounds(place.geometry.viewport); //set map center to the coordinates of the location
    } else { //for places that are not on the default view port (cities, streets)
        map.setCenter(place.geometry.location);  //set map center to the coordinates of the location
        map.setZoom(17); //set a custom zoom level of 17
    }

    homeMarker.setMap(map); //set the map to be used by the  marker
    homeMarker.setPosition(place.geometry.location); //plot marker into the coordinates of the location

});

$('#plot_marker').click(function(e){ //used for plotting the marker into the map if it doesn't exist already
    e.preventDefault();
    homeMarker.setMap(map); //set the map to be used by marker
    homeMarker.setPosition(map.getCenter()); //set position of marker equal to the current center of the map
    map.setZoom(17);

    $('input[type=text], input[type=hidden]').val('');
});






$('#search_ex_places').blur(function(){//once the user has selected an existing place

    var place = $(this).val();
    //initialize values
    var exists = 0;
    var lat = 0;
    var lng = 0;
    $('#saved_places option').each(function(index){ //loop through the save places
        var cur_place = $(this).data('place'); //current place description

        //if current place in the loop is equal to the selected place
        //then set the information to their respected fields
        if(cur_place == place){
            exists = 1;
            $('#place_id').val($(this).data('id'));
            lat = $(this).data('lat');
            lng = $(this).data('lng');
            $('#n_place').val($(this).data('place'));
            $('#n_description').val($(this).data('description'));
            $('#search_new_places').val($(this).data('kayitliyer'));
            $('#n_yetkiliad').val($(this).data('yetkiliad'));
            $('#n_magazaad').val($(this).data('magazaad'));
            $('#n_telefon').val($(this).data('telefon'));
            $('#y_telefon').val($(this).data('yetkilitelefon'));
            $('#derece').val($(this).data('derece'));

        }
    });

    if(exists == 0){//if the place doesn't exist then empty all the text fields and hidden fields
        $('input[type=text], input[type=hidden]').val('');

    }else{
        //set the coordinates of the selected place
        var position = new google.maps.LatLng(lat, lng);

        //set marker position
        homeMarker.setMap(map);
        homeMarker.setPosition(position);

        //set the center of the map
        map.setCenter(homeMarker.getPosition());
        map.setZoom(17);

    }
});



});

Answer 1

您应该在点击侦听器中添加一个创建标记

  google.maps.event.addListener(map, 'click', function (event) {


      document.getElementById("lat").value = event.latLng.lat();
      document.getElementById("long").value = event.latLng.lng();


      var newMarker = new google.maps.Marker({
          draggable: true,
          position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()),
          map: map,
          title: "Your location"
      });


      // Reverse geo code using latLng
      geocoder.geocode({'location': event.latLng }, function(results, status) {

          if (status === 'OK') {
              if (results[0]) {
                  $('#search_new_places').val( results[0].formatted_address );
              } else {
                  window.alert('No results found');
              }

          } else {
              window.alert('Geocoder failed due to: ' + status);
          }

      });

  });