我该如何编写将数据加载到Google地图中的功能，然后单击地图图标来执行其他任务？

Question

我该如何编写一个从api读取纬度和经度并将其加载到google地图中的函数，当我单击google map图标时，它将调用另一个函数并显示图片/屏幕截图（来自api） ？我通过使用json和GraphQl调用api来生成列表，但是当地图初始化时，我需要编写一个函数将其加载到地图中，当我单击它们时，它将调用屏幕截图功能并显示图片/我的api数据的屏幕截图。

  let data = {
    "query": "{ submitContactForm(name: \"" + name + "\", phone: \"" + phone + "\", content: \"" + content + "\"){result}} "
  };

  $.ajax({
    type: "POST",
    url: "**********",
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify(data),
    success: function (response) {
      alert('Congratulations! Your message has benn send');
    },
    error: function (response) {
      alert('Message sending failed');
    }
  })
}




$(document).ready(function () {
  //token refresh
  getLoginToken(function () {
    loadCameraList();

  });
  //load list
  // loadCameraList();
});

var loginKey = "";

function getLoginToken(callback) {
  //login and get token
  let dataString = {
    "query": "{login(emailOrPhone:\"******\", password: \"******\"){loginKey}}"
  };

  $.ajax({
    type: "POST",
    url: "******",
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify(dataString),
    // data:dataString,
    success: function (response, status) {
      // localStorage.setItem("token",response.data.login.loginKey);
      loginKey = response.data.login.loginKey;
      // console.log(loginKey);
      callback();
      // loadCameraList();

    }
  });

}

function loadCameraList() {
  // console.log(loginKey);
  let dataString = {
    "query": "{camerasByUser(userId: 1, token: \"" + loginKey + "\", isPublic: true){id name lat lon address isPublic groups{id name } }}"
  };

  $.ajax({
    type: "POST",
    url: "******************",
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify(dataString),
    success: function (response) {
      cameraList = response.data.camerasByUser;
      console.log(cameraList);
      cameraList.map(function (camera) {
        $('#cameraList').append(createCameraListItem(camera));
      });
      makeLiCollapsible();
      // useCameraList(cameraList);
      // console.log(cameraList);
    }
  });
}

function createCameraListItem(camera){
  let li = '' +
    '<li style="margin:5px 0px">'+
    '<div>'+
    '<button class="collapsible camera" data-id="'+camera.id+'" data-lat="'+camera.lat+'" data-lon="'+camera.lon+'" data-name="'+camera.name+'"><img src="./img/icons/grey.png" /> &nbsp; '+ camera.name +'</button>'+
    '<div class="content text-left">'+
    '<p>'+'<i>' + camera.address +'</p>'+
    '</div>'+
    '</div>'+
    '</li>';
  return li;
}

function showMap(id, lat, lon, name) {
  $('#mapView').empty();
  initMap(lat, lon, name);

  showScreenShot(id);
}

function showScreenShot(id) {
  let query = {
    "query": "{ getScreenCaptures(token:  \"" + loginKey + "\" , cameraIds: [" + id + "]) { screenshots { url cameraId cameraTitle} } }"
  };


  $.ajax({
    type: "POST",
    url: "*******************",
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify(query),
    success: function (response) {
      response.data.getScreenCaptures.screenshots.map(function (camera) {

        $('#screenshot').empty();
        $('#screenshot').append('<p>'+'<i>'+ camera.address +'</p>'+'<img style="width:360px; height:226px" src="' + camera.url + '">');
        return camera;
      });
    }
  });
}

function initMap(lat, lng, name) {
  var myLatLng = {lat: lat, lng: lng};
  var map = new google.maps.Map(document.getElementById('mapView'), {
    zoom: 17,
    center: myLatLng
  });
  var image = './mapicon.png';

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">

          <!-- camera list section  start-->
          <div class=" col-md-4  dhaka_padding">
            <div class="description">
                <ul class="list-unstyled " id="cameraList" >
               </ul>
            </div>
          </div>
        <!-- camera list section  end-->


        <!-- mapview section -->
        <div class="col-md-4" style="position: relative" id="mapbg">
          <div class="mapViewClass" id="mapView" > </div>

        </div>
    

          <div class=" col-md-4" >
             <div class="row dhaka_padding2">
                      <div style=" width:80%; height:100%">
               <div  id="screenshot" style=" margin-left: -.4rem;">

                 <img class="screenshot_img list-unstyled" src="">
               </div>
             </div>
                   <div class="row pt-5 pr-1">
                      <div class="col-md-5 ">
                         <p class="text-left d-text" >For more Download app
                         </p>
                      </div>

                      <div class="col-md-7 ">
                        <img  class="size_img d-video" src="img/icons/play.png" >

                     </div>
                   </div>
               </div>

             </div>

Answer 1

创建标记后，将点击事件附加到标记上，然后您就可以执行点击功能中的所有操作了。

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: image
});
marker.addListener('click', function() {
  //Do anything you want in here
});