我如何编写一个将数据加载到谷歌地图中的函数，并通过单击地图图标，将执行另一项任务

Question

如何编写一个函数，从 api 读取纬度和经度并将它们加载到谷歌地图中，当我单击谷歌地图图标时，它将调用另一个函数并显示图片/屏幕截图（来自 API）？我通过使用 json 和 GraphQl 调用 api 来生成一个列表，但是当地图初始化时，我需要编写一个函数将它们加载到 map 中，当我单击它们时，它将调用屏幕截图函数并显示我的 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
});