Question

我正在使用Python的gmplot绘制一些标记。它生成一个像这样的html文件：

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps - pygmaps </title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=true_or_false"></script>
<script type="text/javascript">
    function initialize() {
        var centerlatlng = new google.maps.LatLng(4.670719, -74.099096);
        var myOptions = {
            zoom: 13,
            center: centerlatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var latlng = new google.maps.LatLng(11.008578, -74.813284);
        var img = new google.maps.MarkerImage('/home/vladimir/anaconda3/lib/python3.5/site-packages/gmplot/markers/FF0000.png');
        var marker = new google.maps.Marker({
        title: "http://www.google.com",
        icon: img,
        position: latlng
        });
        marker.setMap(map);

        var latlng = new google.maps.LatLng(10.396109, -75.518069);
        var img = new google.maps.MarkerImage('/home/vladimir/anaconda3/lib/python3.5/site-packages/gmplot/markers/FF0000.png');
        var marker = new google.maps.Marker({
        title: "http://www.google.com",
        icon: img,
        position: latlng
        });
        marker.setMap(map);
        ... (and so on)
    }
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
    <div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>

其中/home/vladimir/anaconda3/lib/python3.5/site-packages/gmplot/markers/FF0000.png是保存标记文件的目录。我有很多像这样的点，每个点我都有一个URL。在这种情况下，我将URL简单地“http://www.google.com”放在标记的标题中。当我用Web浏览器打开html文件时，我将鼠标悬停在标记上，向我显示URL。我希望能够点击标记并使浏览器打开URL。我对HTML没有很多知识，所以我觉得这很难。我感谢你的帮助和诚意。感谢。

Answer 1

您可以在标记

的点击事件中添加用于管理侦听器的功能

        function initialize() {
            var centerlatlng = new google.maps.LatLng(4.670719, -74.099096);
            var myOptions = {
                zoom: 13,
                center: centerlatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            // add a function  for closure 
            var addListenersOnMarker = function(actMarker,  aTarget,) {

                google.maps.event.addListener(actMarker, 'click', function (event) {
                     window.open(aTarget, '_blank');
                });  
             }


            var latlng = new google.maps.LatLng(11.008578, -74.813284);
            var img = new google.maps.MarkerImage('/home/vladimir/anaconda3/lib/python3.5/site-packages/gmplot/markers/FF0000.png');
            var marker = new google.maps.Marker({
            //title: "http://www.google.com",
            icon: img,
            position: latlng
            });
            marker.setMap(map);

            // call the function for listener
            addListenersOnMarker( marker,  "http://www.google.com" )  ;


            var latlng = new google.maps.LatLng(10.396109, -75.518069);
            var img = new google.maps.MarkerImage('/home/vladimir/anaconda3/lib/python3.5/site-packages/gmplot/markers/FF0000.png');
            var marker = new google.maps.Marker({
            //title: "http://www.google.com",
            icon: img,
            position: latlng
            });
            marker.setMap(map);

            // call the function for listener
            addListenersOnMarker( marker,  "http://www.google.com" )  ;

            var 
            ... (and so on)

        }

HTML可以在谷歌地图上点击标记

1 个答案: