Google Maps Api 点击地图点添加

Posted 2023-03-28

【中文标题】Google Maps Api 点击地图点添加

【英文标题】：Google Maps Api Click to Map Point Add

【发布时间】：2018-07-22 15:08:44

【问题描述】：

点击google map时如何加点？

所以当我点击地图时，我想添加一个指针，但我不能。

在此过程中，我从地图中获取 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);

    
);



);

【参考方案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);
          

      );

  );

【讨论】：

谢谢你，我的朋友。我如何用单指针来做到这一点？地图上有不止一个指针，只有一个指针。

您的评论对我来说毫无意义..您在单击地图时要求添加标记..并在单击时添加到单击侦听器中添加标记...