Question

我想在地图加载时出现标记。也许我可以使用DirectionsRenderer(rendererOptions);但不知道如何解决这个问题。使用JSON数据绘制long和lat，但这里是地图代码。

(function(mapDirections, $, undefined) {
    mapDirections.Directions = (function() {

        function _Directions() {
            var map,
                directionsService, directionsDisplay, 
                autoSrc, autoDest, pinA, pinB,

                markerA = new google.maps.MarkerImage('http://www.africanbudgetsafaris.com/images/icons/mm_20_green.png',
                        new google.maps.Size(24, 27),
                        new google.maps.Point(0, 0),
                        new google.maps.Point(12, 27)),     
                markerB = new google.maps.MarkerImage('http://www.africanbudgetsafaris.com/images/icons/mm_20_green.png',
                        new google.maps.Size(24, 28),
                        new google.maps.Point(0, 0),
                        new google.maps.Point(12, 28)), 

                // Caching the Selectors        
                $Selectors = {
                    mapCanvas: jQuery('#map_offices')[0], 
                    dirPanel: jQuery('#directionsPanel'),
                    dirInputs: jQuery('.directionInputs'),
                    dirSrc: jQuery('#dirSource'),
                    dirDst: jQuery('#dirDestination'),
                    getDirBtn: jQuery('#getDirections'),
                    dirSteps: jQuery('#directionSteps'), 
                    paneToggle: jQuery('#paneToggle'), 
                    useGPSBtn: jQuery('#useGPS'), 
                    paneResetBtn: jQuery('#paneReset')
                },

                autoCompleteSetup = function() {
                    autoSrc = new google.maps.places.Autocomplete($Selectors.dirSrc[0]);
                    autoDest = new google.maps.places.Autocomplete($Selectors.dirDst[0]);
                }, // autoCompleteSetup Ends

                directionsSetup = function() {
                    directionsService = new google.maps.DirectionsService();
                    directionsDisplay = new google.maps.DirectionsRenderer({
                        suppressMarkers: true
                    }); 

                    directionsDisplay.setPanel($Selectors.dirSteps[0]);                                         
                }, // direstionsSetup Ends

                trafficSetup = function() {                 
                    // Creating a Custom Control and appending it to the map
                    var controlDiv = document.createElement('div'), 
                        controlUI = document.createElement('div'), 
                        trafficLayer = new google.maps.TrafficLayer();

                    jQuery(controlDiv).addClass('gmap-control-container').addClass('gmnoprint');
                    jQuery(controlUI).text('Traffic').addClass('gmap-control');
                    jQuery(controlDiv).append(controlUI);               

                    // Traffic Btn Click Event    
                    google.maps.event.addDomListener(controlUI, 'click', function() {
                        if (typeof trafficLayer.getMap() == 'undefined' || trafficLayer.getMap() === null) {
                            jQuery(controlUI).addClass('gmap-control-active');
                            trafficLayer.setMap(map);
                        } else {
                            trafficLayer.setMap(null);
                            jQuery(controlUI).removeClass('gmap-control-active');
                        }
                    });                           
                    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);                               
                }, // trafficSetup Ends


                mapSetup = function() {
                    map = new google.maps.Map($Selectors.mapCanvas, {
                            zoom: 15,
                            center: new google.maps.LatLng(-33.92175976307374, 18.420724868774414),
                            icon: markerA,

                            mapTypeControl: true,
                            mapTypeControlOptions: {
                                style: google.maps.MapTypeControlStyle.DEFAULT,
                                position: google.maps.ControlPosition.TOP_RIGHT
                            },

                            panControl: true,
                            panControlOptions: {
                                position: google.maps.ControlPosition.RIGHT_TOP
                            },

                            zoomControl: true,
                            zoomControlOptions: {
                                style: google.maps.ZoomControlStyle.LARGE,
                                position: google.maps.ControlPosition.RIGHT_TOP
                            },

                            scaleControl: true,
                            streetViewControl: true, 
                            overviewMapControl: true,

                            mapTypeId: google.maps.MapTypeId.ROADMAP
                    });

                    autoCompleteSetup();
                    directionsSetup();
                    trafficSetup();
                }, // mapSetup Ends 

                directionsRender = function(source, destination) {
                    $Selectors.dirSteps.find('.msg').hide();
                    directionsDisplay.setMap(map);

                    var request = {
                        origin: source,
                        destination: destination,
                        provideRouteAlternatives: false, 
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    };      

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

                            directionsDisplay.setDirections(response);

                            var _route = response.routes[0].legs[0]; 

                            pinA = new google.maps.Marker({position: _route.start_location, map: map, icon: markerA}), 
                            pinB = new google.maps.Marker({position: _route.end_location, map: map, icon: markerB});                                                                    
                        }
                    });
                }, // directionsRender Ends

                fetchAddress = function(p) {
                    var Position = new google.maps.LatLng(p.coords.latitude, p.coords.longitude),  
                        Locater = new google.maps.Geocoder();

                    Locater.geocode({'latLng': Position}, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            var _r = results[0];
                            $Selectors.dirSrc.val(_r.formatted_address);
                        }
                    });
                }, // fetchAddress Ends

                invokeEvents = function() {
                    // Get Directions
                    $Selectors.getDirBtn.on('click', function(e) {
                        e.preventDefault();
                        var src = $Selectors.dirSrc.val(), 
                            dst = $Selectors.dirDst.val();

                        directionsRender(src, dst);
                    });

                    // Reset Btn
                    $Selectors.paneResetBtn.on('click', function(e) {
                        $Selectors.dirSteps.html('');
                        $Selectors.dirSrc.val('');
                        $Selectors.dirDst.val('');

                        if(pinA) pinA.setMap(null);
                        if(pinB) pinB.setMap(null);     

                        directionsDisplay.setMap(null);                 
                    });

                    // Use My Location / Geo Location Btn
                    $Selectors.useGPSBtn.on('click', function(e) {      
                        if (navigator.geolocation) {
                            navigator.geolocation.getCurrentPosition(function(position) {
                                fetchAddress(position);
                            }); 
                        }
                    });
                }, //invokeEvents Ends 

                _init = function() {
                    mapSetup();
                    invokeEvents();
                }; // _init Ends

            this.init = function() {
                _init();
                return this; // Refers to: mapDirections.Directions
            }
            return this.init(); // Refers to: mapDirections.Directions.init()
        } // _Directions Ends
        return new _Directions(); // Creating a new object of _Directions rather than a function
    }()); // mapDirections.Directions Ends
})(window.mapDirections = window.mapDirections || {}, jQuery);

地图初始化时我需要一个标记。怎么样？

Answer 1

使用markerImages放置标记的最简单方法：

var someMarker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lon),
        map: map,
        title: 'Some marker',
        icon: markerA
    });

只要在地图初始化后调用它。您甚至可以在发布的代码中获得此示例。

Answer 2

您的方法有一些弃用的代码。（取决于您使用的google maps api v3版本。）

例如，MarkerImage：

...
markerA = new google.maps.MarkerImage('http://www.africanbudgetsafaris.com/images/icons/mm_20_green.png',
new google.maps.Size(24, 27),
new google.maps.Point(0, 0),
new google.maps.Point(12, 27)),
markerB = new google.maps.MarkerImage('http://www.africanbudgetsafaris.com/images/icons/mm_20_green.png',
new google.maps.Size(24, 28),
new google.maps.Point(0, 0),
new google.maps.Point(12, 28)),
...

..被 Icon type 取代。

来自文档：

在3.10版本中添加了Icon对象文字，并替换从版本3.11开始的MarkerImage。

因此，当前版本的谷歌地图是3.17（实验）和3.16（发布）。

mapOptions 根本不会使用名为icon的属性：

...
map = new google.maps.Map($Selectors.mapCanvas, {
                            zoom: 15,
                            center: new google.maps.LatLng(-33.92175976307374, 18.420724868774414),
                            icon: markerA, // <-- not valid
...

如果你不想创建一个标记（带有图标）并在地图上显示它，你只需为地图创建一个标记，并将地图居中到该位置：

function initialize() {

   var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);

   var mapOptions = {
        zoom: 4,
        center: myLatlng
   };

   var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

   // Example marker image
   var markerImage = {
        url: "http://placehold.it/64/ff0000", 
        size: new google.maps.Size(64, 64),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(32, 32)
   };

   var marker = new google.maps.Marker({
       position: myLatlng,
       map: map,
       title: 'Hello World!',
       icon: markerImage  // How to place icon to marker
   });

}

google.maps.event.addDomListener(window, 'load', initialize);

请参阅： JS FIDDLE EXAMPLE

我还建议您查看 google maps api examples page ，因为它充满了有用的示例。（包括 how to place a marker to the map on load ）。

干杯。

在特定点上载时设置默认初始标记：Google Maps Directions Service

2 个答案: