Question

我需要Google Maps WEb JS API的一些帮助。我第一次潜入它，现在我被卡住了。

我想在Google地图上设置两个静态标记的静态方向。

我正在尝试用OOP编写代码。

地图正在加载我的网页，但我没有看到“标记”和“方向”。

请一些帮助和建议！

var WEB = WEB || {};

(function() {

	'use strict'

	//controller init object
	WEB.controller = {

		init: function() {
			// initialize APP objects
			google.maps.event.addDomListener(window, 'load', WEB.googleMaps.init());			
		}
	};

	WEB.googleMaps = {

		init: function() {

			WEB.googleMaps.directionsDisplay();
			console.log('1. init directionsDisplay');

			var map = new google.maps.Map(document.getElementById('map-canvas'), {
			    center: new google.maps.LatLng(52.295042, 4.867158),
			    zoom: 14,
			    maxZoom: 15,
			    minZoom: 13,
			    draggable: false
			});
			
			console.log('2. init map');

			WEB.googleMaps.directionsDisplay(map);
			console.log('3. init directionsDisplay in map');

			console.log('4. init calc route');
			WEB.googleMaps.calcRoute();
		},

		directionsDisplay: function() {
			new google.maps.DirectionsRenderer();
		},

		directionsService: function(){
			new google.maps.DirectionsService();
		},

		calcRoute: function() {

			WEB.googleMaps.directionsService();
			console.log('5. init directionsService');

			var start = new google.maps.LatLng(XX.XXXXXX, XX.XXXXXX);
  			var end = new google.maps.LatLng(XX.XXXXXX, XX.XXXXXX);
  			console.log('6. set directions', start, end);

			var request = {
		      	origin: start,
		      	destination: end,
		      	travelMode: google.maps.TravelMode.DRIVING
		  	};
		  	
		  	console.log('7. put directions in the service', request);
		  	WEB.googleMaps.directionsService(request, function(response, status) {
		    	if (status == google.maps.DirectionsStatus.OK) {
					console.log('7. DirectionsStatus is OK');			    		
		      		WEB.googleMaps.directionsDisplay(response);
		    	}    			    	
		  	});
		}					
	};

	WEB.controller.init();

})();

<!DOCTYPE html>
<html lang="nl">

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- GOOGLE MAPS API -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
</head>

<body class="">
    <header class="">
    </header>
    <main class="">
        <div id="map-canvas" style="width: 100%; height: 500px; margin:0; padding:0; border:0;">
        </div>
    </main>
</body>

</html>

Answer 1

你需要做更像这样的事情。

WEB.googleMaps = {
        init: function() {
            var map = new google.maps.Map(document.getElementById('map-canvas'), {
                center: new google.maps.LatLng(52.295042, 4.867158),
                zoom: 14,
                maxZoom: 15,
                minZoom: 13,
                draggable: false
            });

            var directionsDisplay = WEB.googleMaps.getDirectionsDisplay(map);

            WEB.googleMaps.calcRoute(directionsDisplay);
        },

        getDirectionsDisplay: function(map) {
            return new google.maps.DirectionsRenderer({map: map});
        },

        getDirectionsService: function(){
            return new google.maps.DirectionsService();
        },

        calcRoute: function(directionsDisplay) {
            var directionsService = WEB.googleMaps.getDirectionsService();

            var start = new google.maps.LatLng(XX.XXXXXX, XX.XXXXXX);
            var end = new google.maps.LatLng(XX.XXXXXX, XX.XXXXXX);

            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.TravelMode.DRIVING
            };

            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }                       
            });
        }                   
    };

    WEB.controller.init();

这有助于仔细阅读： https://developers.google.com/maps/documentation/javascript/directions

Google Maps API v3 WEB JS两个静态标记之间的方向

1 个答案: