เพิ่มเครื่องหมายใน Google Map เมื่อคลิก


87

ฉันพยายามอย่างมากที่จะหาตัวอย่างง่ายๆในการเพิ่มเครื่องหมายลงใน Google Map เมื่อผู้ใช้คลิกซ้ายบนแผนที่

ฉันได้มองไปรอบ ๆ ในช่วงสองสามชั่วโมงที่ผ่านมาและอ่านเอกสารประกอบของ Google Maps API และจะขอบคุณสำหรับความช่วยเหลือ!

คำตอบ:


169

หลังจากค้นคว้าเพิ่มเติมฉันก็หาวิธีแก้ปัญหาได้

google.maps.event.addListener(map, 'click', function(event) {
   placeMarker(event.latLng);
});

function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location, 
        map: map
    });
}

7
เราสามารถทำให้ผู้ใช้สามารถเพิ่มเพียงครั้งเดียวได้หรือไม่ และย้ายเครื่องหมาย?
Chaibi Alaa

กรุณาให้ลิงค์ตัวอย่าง
Sopo

43

ในปี 2560 การแก้ปัญหาคือ:

map.addListener('click', function(e) {
    placeMarker(e.latLng, map);
});

function placeMarker(position, map) {
    var marker = new google.maps.Marker({
        position: position,
        map: map
    });
    map.panTo(position);
}

20

นี่เป็นคุณสมบัติที่บันทึกไว้และสามารถพบได้ที่นี่

// This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(e) {
    placeMarker(e.latLng, map);
  });

  function placeMarker(position, map) {
    var marker = new google.maps.Marker({
      position: position,
      map: map
    });  
    map.panTo(position);
  }

14

@ Chaibi Alaa เพื่อให้ผู้ใช้สามารถเพิ่มได้เพียงครั้งเดียวและย้ายเครื่องหมาย คุณสามารถตั้งค่าเครื่องหมายในคลิกแรกจากนั้นเพียงแค่เปลี่ยนตำแหน่งในการคลิกครั้งต่อไป

var marker;

google.maps.event.addListener(map, 'click', function(event) {
   placeMarker(event.latLng);
});


function placeMarker(location) {

    if (marker == null)
    {
          marker = new google.maps.Marker({
             position: location,
             map: map
          }); 
    } 
    else 
    {
        marker.setPosition(location); 
    } 
}


0
  1. ก่อนอื่นให้ประกาศเครื่องหมาย:
this.marker = new google.maps.Marker({
   position: new google.maps.LatLng(12.924640523603115,77.61965398949724),
   map: map
});
  1. เรียกวิธีการลงจุดเครื่องหมายเมื่อคลิก:
this.placeMarker(coordinates, this.map);
  1. กำหนดฟังก์ชัน:
placeMarker(location, map) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
    this.markersArray.push(marker);
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.