Fatal编程技术网
  • javascript/
  • Javascript 如何在谷歌地图信息窗口中单击电子邮件ID时打开电子邮件应用程序

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

javascript google-maps google-maps-api-3

Javascript 如何在谷歌地图信息窗口中单击电子邮件ID时打开电子邮件应用程序,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我想在点击谷歌地图信息窗口中的电子邮件ID时打开带有预填充主题“subject”的电子邮件应用程序。下面是我为显示电子邮件ID而编写的代码，我不确定如何继续 function init(resp) { var mapProp = { center : new google.maps.LatLng(resp.data[0].Lat, resp.data[0].Lon), zoom : 7,

我想在点击谷歌地图信息窗口中的电子邮件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);

        });

函数初始化（resp）{
var mapProp={
中心：新的google.maps.LatLng（resp.data[0].Lat，
相应数据[0].Lon），
缩放：7，
};
var map=new google.maps.map（document.getElementById（“googleMap”），
mapProp）；
$。每个（分别为数据、函数（索引、值）{
var mylatng=new google.maps.LatLng（value.Lat，value.Lon）；
var marker=new google.maps.marker({
职位：myLatlng，
标签：值['Number']，
内容：“电话：“+value['Phone Number']+'
”
+电子邮件：“+”
});
var infowindow=new google.maps.infowindow({
内容：“电话：“+value['Phone Number']+'
”
+电子邮件：“+”
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
//要将标记添加到映射，请调用setMap（）；
marker.setMap（map）；
});
您可以使用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>'
  });

var infowindow=new google.maps.infowindow({
内容：''+
' '+
''
});
以下是示例代码。若要了解其工作原理，可以将其复制并另存为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>


信息窗口
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
//此示例在澳大利亚中部显示一个标记。
//当用户单击标记时，将打开一个信息窗口。
函数initMap（）{
var uluru={lat:-25.363，液化天然气：131.044}；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心：乌卢鲁
});
var contentString=''+
' '+
'';
var infowindow=new google.maps.infowindow({
内容：contentString
});
var marker=new google.maps.marker({
职位：乌卢鲁，
地图：地图，
标题：“乌卢鲁（艾尔斯岩）”
});
marker.addListener（'click'，function（））{
信息窗口。打开（地图、标记）；
});
}
希望这有帮助