Question

美好的一天

我需要将文本框中的文本转换为超链接。

问题是，新链接必须显示在文本框中。

一旦用户在模态谷歌地图弹出窗口中选择了一个位置，我就会在谷歌地图上使用脚本自动将坐标输入到文本框中。当他们在选择了他们的位置后按“继续”时，必须在此网址后添加这些坐标：“https://www.google.com/maps/place(+坐标）”，如果需要，将为用户提供指向其位置的链接。

因此，一旦点击地图，坐标就已经填满了。按“继续”后，必须在坐标前添加谷歌地图网址，以建立链接。

任何帮助都将不胜感激。

http://jsfiddle.net/fag9n52y/105/

$(document).ready(function(){
 $("#cancel").click(function(){ //closes coor1 class and clears coordinate1 value
     $(".Coor1").hide();
     $("#Coordinate1").val('');
});
  $("#clearFields").click(function (){ // clears Coordinate1 value
     $("#Coordinate1").val('');
  });
});


var center = new google.maps.LatLng(23.578462278048715, 45.40855407714844);
function initialize() {

    var mapOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: center
    }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker = new google.maps.Marker({
        map: map,
        position: center
       
    });

   google.maps.event.addListener(map, 'click', function(event) {
      google.maps.event.trigger(map, 'resize');
      $("#Coordinate1").val(event.latLng.lat() + ", " + event.latLng.lng());
      $("#Coordinate1").select();

         if (marker) { marker.setMap(null); }

                 marker = new google.maps.Marker({ position: event.latLng, map: map});
                 map.panTo(marker.getPosition());
                });

}
$(document).ready(function(){
$('#Coordinate1').on('click', function () {
    $('#modal').modal({
        keyboard: false
    }).on('shown.bs.modal', function () {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(center);
    });
});
});
google.maps.event.addDomListener(window, 'load', initialize);

body, .modal-open .page-container, .modal-open .page-container .navbar-fixed-top, .modal-open .modal-container {
    overflow-y: scroll;
}
@media (max-width: 979px) {
    .modal-open .page-container .navbar-fixed-top {
        overflow-y: visible;
    }
}
#map-canvas {
    height: 400px;
}

<input type="text" id="Coordinate1">

<div id="modal" class="modal hide fade">
    <div class="modal-body">
        <div id="map-canvas"></div>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button> <!-- WHEN THIS BUTTON IS CLICKED, THE COORDINATES WHICH HAVE BEEN AUTOMATICALLY ENTERED INTO THE TEXTBOX, MUST BE CONVERTED INTO A HYPERLINK" -->
        <button type="button" id="clearFields" data-dismiss="modal" class="btn">Clear</button>
        <button type="button" data-dismiss="modal" id="cancel" class="btn" data-value="0">Cancel</button>
    </div>
</div>

Answer 1

在这样的文本字段中放置超链接真的不是一种方法。我稍微修改了你的小提琴并使用了span而不是文本字段。文本字段通常是用户输入，因此它们不能设计为保存超链接。话虽这么说，你可以用跨度来达到类似的效果。请在此处查看修改过的小提琴：

http://jsfiddle.net/usrsud21/

我使用以下代码在span中创建超链接：

document.getElementById("Coordinate1").innerHTML="<a href = "+"https://www.google.com/maps/place/"+event.latLng.lat() + "," + event.latLng.lng()+">https://www.google.com/maps/place/"+event.latLng.lat() + "," + event.latLng.lng()+"</a>";

我稍微改变了设计以使其工作。我把一个div放在＆＃34;启动地图＆＃34;并将其设置为点击＆＃34;启动地图＆＃34;启动地图。我还将文本输入更改为范围，并将“＃URL;地图URL”放置在占位符中。＆＃34;单击地图以创建标记后，此占位符将替换为超链接。它将被一个发送到maps.google.com的超链接所取代，以便它打开与标记相同的lat，lng坐标。

我希望这有帮助！

在同一文本框中点击按钮时将文本转换为超链接？

1 个答案: