Как открыть почтовое приложение, нажав на идентификатор электронной почты в Google Maps InfoWindow - PullRequest
0 голосов
/ 24 января 2020

Я хочу открыть приложение электронной почты с предварительно заполненной темой 'SUBJECT', нажимая на идентификатор электронной почты в окне Google Maps Info. Ниже приведен код, который я написал для отображения идентификатора электронной почты, и я не уверен, что делать дальше.

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);

        });

1 Ответ

2 голосов
/ 28 января 2020

Вы можете использовать mailto из JavaScript. Вы можете изменить значения различных параметров в соответствии с вашим адресом электронной почты.

Таким образом, в вашем коде вы можете поместить что-то вроде этого в качестве вашего контента в ваше информационное окно:

  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>

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...