显示信息窗口的Javascript Google Map API问题

乌萨马领主

我有一个Javascript代码，其中显示有2个图钉的地图以及它们之间的一条线作为路线方向，我想在图钉的单击时显示一个信息“ Hello World”，我为此设置了一个功能，如我的代码中所述，当我单击图钉时，没有任何显示。难道我做错了什么？如何使我的图钉在点击时显示信息窗口？谢谢

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
        <title>Vehicle Location</title>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    </head>
    <body>
        <div class="container">          
            <div class="row">
                <div class="col-md-6">
                    <h3 class="route-heading">Actual Route &nbsp;&nbsp;<button id="refesh-route" class="btn btn-primary doRefresh">Refresh</button>&nbsp;&nbsp;</h3>
                    <div id="map-actual" style="width:100%;height:500px;margin-left:0px;margin-top:20px;"></div>
                </div>
                 <div class="col-md-6">                  
                   <div id="map-actual" style="width:100%;height:500px;margin-left:0px;margin-top:13%;">  
                   </div>
                </div>
            </div>                  
        </div>
        <script>
var actualpoly = null;
var coordinates = [[28.3789289, -80.60056681], [28.37792783, -80.60046333]];
$(document).ready(function () {
    var geoloc = [];
    for (var i = 0; i < coordinates.length; i++) {
        geoloc.push(new google.maps.LatLng(coordinates[i][0], coordinates[i][1]));
    }
    if (actualpoly !== null) {
        actualpoly.setMap(null);
    }
    actualpoly = createPoly(geoloc, "head", map_actual, "green");
    $('#refesh-route').click(function () {
        var geoloc = [];
        for (var i = 0; i < coordinates.length; i++) {
            geoloc.push(new google.maps.LatLng(coordinates[i][0], coordinates[i][1]));
        }
        if (actualpoly !== null) {
            actualpoly.setMap(null);
        }
        actualpoly = createPoly(geoloc, "head", map_actual, "green");
    });
});
// Draws a polyline with accordant arrow heads
function createPoly(path, mode, map, color) {
    var iconsetngs = {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
    };
    var poly = new google.maps.Polyline({
        strokeColor: color,
        strokeOpacity: 0.8,
        strokeWeight: 3,
        map: map,
        path: path,
        icons: [{
            icon: iconsetngs,
            repeat: '100px',
            offset: '100%'
        }]
    });
    //setArrows.load(p, mode);
    return poly;
}
var directionsDisplay, setArrows, map_actual, directionsDisplayActual;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
    //Planned direction display
    directionsDisplay = new google.maps.DirectionsRenderer({
        polylineOptions: {
            strokeColor: 'brown',
            strokeOpacity: 0.7,
            strokeWeight: 3
        },
        suppressMarkers: true,
        suppressPolylines: true
    });
    //actual direction display
    directionsDisplayActual = new google.maps.DirectionsRenderer({
        polylineOptions: {
            strokeColor: 'brown',
            strokeOpacity: 0.7,
            strokeWeight: 3
        },
        suppressMarkers: true,
        suppressPolylines: true
    });
    var mapCenter = new google.maps.LatLng(coordinates[0][0], coordinates[0][1]);
    var mapOptions = {
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: mapCenter
    }
    map_actual = new google.maps.Map(document.getElementById('map-actual'), mapOptions);
    calcRoute();
}

function calcRoute() {
    var start = new google.maps.LatLng(coordinates[0][0], coordinates[0][1]);
    var end = new google.maps.LatLng(coordinates[0][0], coordinates[0][1]);
    var waypts = [];
    for (var i = 1; i < coordinates.length; i++) {
        waypts.push({
            location: new google.maps.LatLng(coordinates[i][0], coordinates[i][1]),
            stopover: true
        });
    }
    var request = {
        origin: start,
        destination: end,
        waypoints: waypts,
        optimizeWaypoints: true,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            directionsDisplay.setMap(map);
            directionsDisplayActual.setDirections(response);
            directionsDisplayActual.setMap(map_actual);
            var route = response.routes[0];
            fx(route);
        }
    });
}

function fx(o) {
    if (o && o.legs) {
        var p = [];
        for (l = 0; l < o.legs.length; ++l) {
            var leg = o.legs[l];

            var c = leg.start_location;

            var marker = new google.maps.Marker({
                position: c,
                //icon: new google.maps.MarkerImage('icons/marker'+(l+1)+'.png'),
                map: map
            });
            var marker_actual = new google.maps.Marker({
                position: c,
                //icon: new google.maps.MarkerImage('icons/marker'+(l+1)+'.png'),
                map: map_actual
            });
            var infowindow = new google.maps.InfoWindow();
            var html = 'Hello World!';           
            google.maps.event.addListener(marker, 'click', (function (marker, html) {
                return function () {
                    infowindow.setContent(html);
                    infowindow.open(map, marker);
                }
            })(marker, html));
        }
        createPoly(o.overview_path, "head", map, "brown");
        $('#refesh-route').click();
        $('.doRefresh').click(function () {
            location.reload();
        });
    }
}
google.maps.event.addDomListener(window, 'load', initialize);
        </script>

    </body>
</html>

地理编码

您正在将infoWindow放在标记和地图上；正在显示的地图是map_actual，标记是marker_actual（不确定为什么要拥有2种东西）

        google.maps.event.addListener(marker_actual, 'click', (function (marker, html) {
            return function () {
                infowindow.setContent(html);
                infowindow.open(map_actual, marker);
            }
        })(marker_actual, html));

工作实例

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。