如何在谷歌地图信息窗口中单击电子邮件 ID 时打开电子邮件应用程序

Question

我想在谷歌地图信息窗口中单击电子邮件 ID 时打开带有预填充主题“SUBJECT”的电子邮件应用程序。下面是我写的显示电子邮件 ID 的代码，我不知道如何继续。

function init(resp) {

        var mapProp = {
            center : new google.maps.LatLng(resp.data[0].Lat,
                    resp.data[0].Lon),
            zoom : 7,
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),
                mapProp);

        $.each(resp.data, function(index, value) {

            var myLatlng = new google.maps.LatLng(value.Lat, value.Lon);

            var marker = new google.maps.Marker({
                position : myLatlng,
                label : value['Number'],
                content : "Phone: " + value['Phone Number'] + '<br>'
                        + "E-Mail: " + '<a href="'+ value['E-Mail']+'">'+ value['E-Mail'] +'</a>'
            });

            var infowindow = new google.maps.InfoWindow({
                content : "Phone: " + value['Phone Number'] + '<br>'
                        + "E-Mail: " + '<a href="'+ value['E-Mail']+'">'+ value['E-Mail'] +'</a>'

            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);

            });

            // To add the marker to the map, call setMap();
            marker.setMap(map);

        });

Answer 1

您可以使用 JavaScript 的 mailto。您可以更改不同参数的值以适合您的电子邮件。

因此，在您的代码中，您可以将这样的内容作为您的信息窗口中的内容：

  var infowindow = new google.maps.InfoWindow({
    content :'<div id="content">'+    
      '<a href="mailto:username@example.com?subject=Subject&body=message%20goes%20here">'+
      'Click to Email</a> '+
      '</div>'
  });

以下是示例代码。要查看它是如何工作的，您可以将其复制并保存为 html 文件并在浏览器中运行。请注意更改您的 API 密钥：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info Windows</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      // This example displays a marker at the center of Australia.
      // When the user clicks the marker, an info window opens.

      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });

       var contentString = '<div id="content">'+
      '<a href="mailto:username@example.com?subject=Subject&body=message%20goes%20here">'+
      'Click to Email</a> '+
      '</div>';

        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });

        var marker = new google.maps.Marker({
          position: uluru,
          map: map,
          title: 'Uluru (Ayers Rock)'
        });
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=CHANGE_API_KEY_HERE&callback=initMap">
    </script>
  </body>
</html>

希望这会有所帮助！