Задать вопрос
@bezzz1

Google Maps как сделать перемещение маркера кликом?

Здравствуйте. Я использую плагин для WP в котором требуется указывать местоположение с помощью установки маркера. Сейчас маркер можно установить в необходимое место только перетаскиванием.
Подскажите как мне изменить код, что бы устанавливать маркер кликом, сохранив перетаскивание?
Спасибо.
Это код отвечающий за вывод карты:
(function( $ ) {

	$.fn.mapify = function( options ) {

		// Default settings
		var settings = $.extend({
			mapify			: this,
			mapHeight		: '350px',
			startGeoLat		: 40.712784,
			startGeoLng		: -74.005941,
			latInputId		: 'geo_lat',
			lngInputId		: 'geo_lng'
		}, options );

		return this.each(function( ) {

			var map,
				mapLock 		= false,
				geocoder 		= new google.maps.Geocoder(),
				mapOptions 		= { center: new google.maps.LatLng( settings.startGeoLat, settings.startGeoLng ), zoom: 13, streetViewControl: false },
				marker,
				autoComplete	= this,
				infoWindow;

			var mapifyHandler = {

				init: function() {
					$( settings.mapify ).parent().closest( 'div, p, td' ).wrap( '<div class="mapified"></div>' )
						.after( 
							'<div id="map-canvas" style="width: 100%; height: '+settings.mapHeight+';"></div>' +
							'<div id="map-canvas-options"><span class="map-action-lock unlocked" data-lock="' +
							wpjmel.l10n.locked + '" data-unlock="' + wpjmel.l10n.unlocked + '"></span></div>' +
							'<input type="hidden" name="'+settings.latInputId+'" id="'+settings.latInputId+'" value="'+settings.startGeoLat+'">' +
							'<input type="hidden" name="'+settings.lngInputId+'" id="'+settings.lngInputId+'" value="'+settings.startGeoLng+'">' );

					infoWindow			= new google.maps.InfoWindow();
					map 				= new google.maps.Map( document.getElementById( 'map-canvas' ), mapOptions );
					autoCompleteField	= new google.maps.places.Autocomplete( jQuery( autoComplete )[0] );
					autoCompleteField.bindTo( 'bounds', map );
					marker 				= new google.maps.Marker({
						map				: map,
						draggable		: true,
						animation		: google.maps.Animation.DROP,
						anchorPoint		: new google.maps.Point(0, -29),
						position		: mapOptions.center
					});

					
					$( autoComplete ).on( 'change', $( autoComplete ), function() {
						mapifyHandler.geoCode( $( autoComplete ).val() );
					});

					
					// Autocomplete change
					google.maps.event.addListener( autoCompleteField, 'place_changed', function() {
						mapifyHandler.autoCompleteChange();
					});

					// Marker change
					google.maps.event.addListener( marker, 'dragend', function( event ) {
						mapifyHandler.markerChange();
					});
					

					// TEMP hack to get the settings page correct.
					jQuery( '.nav-tab' ).on( 'click', function() {
						if ( map != undefined ) {
							google.maps.event.trigger( map, 'resize' );
							map.setCenter( { "lat" : parseFloat( $( '#' + settings.latInputId ).val() ), "lng" : parseFloat( $( '#' + settings.lngInputId ).val() ) } );
							marker.setPosition( { "lat" : parseFloat( $( '#' + settings.latInputId ).val() ), "lng" : parseFloat( $( '#' + settings.lngInputId ).val() ) } );
						}
					});

					$lock = $( '#map-canvas-options .map-action-lock' );

					$lock.text( $lock.data( 'lock' ) );

					jQuery( document.body ).on( 'click', '#map-canvas-options .map-action-lock', function() {
						$( this ).toggleClass( 'locked' ).toggleClass( 'unlocked' );
						$lock.text( $lock.data( $lock.hasClass( 'locked' ) ? 'unlock' : 'lock' ) );
						mapLock = ! mapLock;
					});

				},
				autoCompleteChange: function( event ) {
					var place = autoCompleteField.getPlace();
					mapifyHandler.updateLocation( place.geometry.location.lat(), place.geometry.location.lng() );
				},
				markerChange: function( position ) {

					mapifyHandler.updateLocation( marker.getPosition().lat(), marker.getPosition().lng() );
					if ( mapLock == false ) {
						mapifyHandler.reverseGeoCode( marker.getPosition().lat(), marker.getPosition().lng() );
					}
				},
				setAddress: function( address ) {
					$( autoComplete ).val( address );
				},
				setMarker: function( latLng ) {
					marker.setVisible(false);
					marker.setPosition( latLng );
					marker.setVisible( true );
				},
				updateLocation: function( lat, lng ) {
					var latLng = new google.maps.LatLng( lat, lng );
					$( '#' + settings.latInputId ).val( lat );
					$( '#' + settings.lngInputId ).val( lng );
					map.panTo( latLng );
					mapifyHandler.setMarker( latLng );
				},
				geoCode: function( address ) {
					geocoder.geocode( { 'address': address }, function( results, status ) {
						if ( status == google.maps.GeocoderStatus.OK && results[0] ) {
							mapifyHandler.updateLocation( results[0].geometry.location.lat(), results[0].geometry.location.lng() );
						}
					});
				},
				reverseGeoCode: function( lat, lng ) {
					geocoder.geocode({ 'latLng': marker.getPosition() }, function( results, status ) {
						if ( status == google.maps.GeocoderStatus.OK && results[0] ) {
							mapifyHandler.setAddress( results[0].formatted_address );
						}
					});
				}
			};

			mapifyHandler.init();

		});

	};

}( jQuery ));
  • Вопрос задан
  • 248 просмотров
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы