Question

我有一个脚本，用户点击“给我们打电话”，然后会显示该号码并发送一个GA事件。

是否可以将号码链接到tel：-link，以便您可以在移动设备上拨打该号码？

我试图插入一个ID，但这个号码在手机上无法点击。

感谢您的回答， DAV

这是剧本：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using Android.Content;
using Android.Gms.Maps;
using Android.Gms.Maps.Model;
using Android.Widget;
using CustomRenderer.Droid;
using MyProject.Controls;
using MyProject.Models;
using Xamarin.Forms;
using Xamarin.Forms.Maps;
using Xamarin.Forms.Maps.Android;
using MyProject.Droid;

[assembly: ExportRenderer(typeof(CustomMap), typeof(CustomMapRenderer))]
namespace CustomRenderer.Droid
{
    public class CustomMapRenderer : MapRenderer, GoogleMap.IInfoWindowAdapter, IOnMapReadyCallback
    {
        GoogleMap map;
        List<CustomPin> customPins;
        bool isDrawn;

        protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Map> e)
    {
        base.OnElementChanged(e);

        if (e.OldElement != null)
        {
            map.InfoWindowClick -= OnInfoWindowClick;
        }

        if (e.NewElement != null)
        {
            var formsMap = (CustomMap)e.NewElement;
            customPins = formsMap.CustomPins;
            ((MapView)Control).GetMapAsync(this);
        }
    }

    public void OnMapReady(GoogleMap googleMap)
    {
        map = googleMap;
        map.InfoWindowClick += OnInfoWindowClick;
        map.SetInfoWindowAdapter(this);
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName.Equals("VisibleRegion") && !isDrawn)  
        {
            map.Clear();

            foreach (var pin in customPins)
            {
                var marker = new MarkerOptions();
                marker.SetPosition(new LatLng(pin.Pin.Position.Latitude, pin.Pin.Position.Longitude));
                marker.SetTitle(pin.Pin.Label);
                marker.SetSnippet(pin.Pin.Address);

                map.AddMarker(marker);
            }
            isDrawn = true;
        }
    }

    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
        base.OnLayout(changed, l, t, r, b);

        if (changed)
        {
            isDrawn = false;
        }
    }

    void OnInfoWindowClick(object sender, GoogleMap.InfoWindowClickEventArgs e)
    {
        var customPin = GetCustomPin(e.Marker);
        if (customPin == null)
        {
            throw new Exception("Custom pin not found");
        }

        if (!string.IsNullOrWhiteSpace(customPin.Phone))
        {

            var url = Android.Net.Uri.Parse("tel:" + customPin.Phone);
            var intent = new Intent(Intent.ActionCall, url);
            //intent.SetData(url);
            intent.AddFlags(ActivityFlags.NewTask);
            Android.App.Application.Context.StartActivity(intent);
        }
    }

    public Android.Views.View GetInfoContents(Marker marker)
    {
        var inflater = Android.App.Application.Context.GetSystemService(Context.LayoutInflaterService) as Android.Views.LayoutInflater;
        if (inflater != null)
        {
            Android.Views.View view;

            var customPin = GetCustomPin(marker);
            if (customPin == null)
            {
                throw new Exception("Custom pin not found");
            }
            view = inflater.Inflate(Resource.Layout.MapInfoWindow, null);

            var infoTitle = view.FindViewById<TextView>(Resource.Id.InfoWindowTitle);
            var infoSubtitle = view.FindViewById<TextView>(Resource.Id.InfoWindowSubtitle);
            var infoHours = view.FindViewById<TextView>(Resource.Id.InfoWindowHours);
            var infoPhone = view.FindViewById<TextView>(Resource.Id.InfoWindowsPhone);

            if (infoTitle != null)
            {
                infoTitle.Text = marker.Title;
            }
            if (infoSubtitle != null)
            {
                infoSubtitle.Text = marker.Snippet;
            }
            if (infoHours != null)
            {
                infoHours.Text = customPin.Hours;
            }
            if (infoPhone != null)
            {
                infoPhone.Text = customPin.Phone;
            }

            return view;
        }
        return null;
    }

    public Android.Views.View GetInfoWindow(Marker marker)
    {
        return null;
    }

    CustomPin GetCustomPin(Marker annotation)
    {
        var position = new Position(annotation.Position.Latitude, annotation.Position.Longitude);
        foreach (var pin in customPins)
        {
            if (pin.Pin.Position == position)
            {
                return pin;
            }
        }
        return null;
    }
  }
}

Answer 1

您的代码问题在于，您在任何时候都无法创建<a href="tel:...">元素。您所做的就是将元素innerHTML设置为不可点击的电话号码。

您必须实际插入<a>元素：

body.on('click', '#ipCallButton:not(.ipClicked)', function(){
    var _this = $(this);
    _this.append($('<a href="tel:' + phonenumber + '">' + phonenumber + '</a>'));
    _this.addClass('ipClicked');
    //Send event
    ga('send', 'event', 'Contact', 'Click', 'Telefoonnummer');
});

老实说，我认为更好的解决方案是直接在HTML中添加<a>并使用CSS隐藏它，直到被点击为止。在你正在做的很多事情上，你并不需要JavaScript：

＆＃13;

function ipTrackButton(){
    if(window.jQuery){
        var $ = jQuery;
        var body = $('body');

        //Set event
        body.on('click', '#ipCallButton:not(.ipClicked)', function(){
            var _this = $(this);
            _this.addClass('ipClicked');
            // removed: send ga event
       });
    }
    else {
        setTimeout(ipTrackButton, 50);
    }
}

ipTrackButton();

＆＃13;

#ipCallButton:not(.ipClicked) .afterclick {
    display: none;
}
#ipCallButton.ipClicked .beforeclick {
    display: none;
}
/* copied */
#ipCallButton { background-color:#eaeaea;padding:5px 8px;cursor:pointer;text-decoration:underline; } #ipCallButton.ipClicked { text-decoration:none;cursor:default; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
T: <span id="ipCallButton">
  <span class="beforeclick">Bel ons | Call us</span>
  <span class="afterclick">
      <a href="tel:+31 (0)20 - 679 62 22">+31 (0)20 - 679 62 22</a>
</span><br>
E: <a href="mailto:info@pvhadvocaten.nl">info@pvhadvocaten.nl</a>

＆＃13;

在点击事件中插入链接

1 个答案: