在标记谷歌地图api之间创建一条线

时间:2013-12-16 19:58:58

标签: google-maps google-maps-api-3 maps google-maps-markers var

我需要以某种方式在每个标记之间创建线

我一直在查看https://developers.google.com/maps/documentation/javascript/overlays以供参考,但似乎无法将其应用于此示例,

我还特别看了http://www.w3schools.com/googleAPI

var myTrip=[stavanger,amsterdam,london];
var flightPath=new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
  });

但不幸的是,我不确定该变量应该取代斯塔万格,阿姆斯特丹,伦敦等,因为价值可能是永恒的。我尝试使用 marker_id 作为变量,但这不起作用。如果我的谷歌地图代码下面,任何提示都会很棒

由于

亨利

<script type="text/javascript">
    (function($){
        var $et_main_map = $( '#et_main_map' );

        et_active_marker = null;

        $et_main_map.gmap3({
        map:{
            options:{
<?php
while ( have_posts() ) : the_post();
$et_location_lat = get_post_meta( get_the_ID(), '_et_listing_lat', true );
$et_location_lng = get_post_meta( get_the_ID(), '_et_listing_lng', true );

            if ( '' != $et_location_lat && '' != $et_location_lng )
                printf( 'center: [%s, %s],', $et_location_lat, $et_location_lng );

break;
endwhile;
rewind_posts();
?>
                zoom:<?php
                        if ( is_home() || is_front_page() )
                            echo esc_js( et_get_option( 'explorable_homepage_zoom_level', 3 ) );
                        else
                            echo esc_js( et_get_option( 'explorable_default_zoom_level', 5 ) ); ?>,
                mapTypeId: google.maps.MapTypeId.<?php echo esc_js( strtoupper( et_get_option( 'explorable_map_type', 'Roadmap' ) ) ); ?>,
                mapTypeControl: true,
                mapTypeControlOptions: {
                    position : google.maps.ControlPosition.LEFT_CENTER,
                    style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                streetViewControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
                },
                navigationControl: false,
                scrollwheel: true,
                streetViewControl: true,
                zoomControl: false
            }
        }
    });

    function et_add_marker( marker_order, marker_lat, marker_lng, marker_description ){
        var marker_id = 'et_marker_' + marker_order;

        $et_main_map.gmap3({
            marker : {
                id : marker_id,
                latLng : [marker_lat, marker_lng],
                options: {
                    icon : "<?php echo get_template_directory_uri(); ?>/images/red-marker.png"
                },
                events : {
                    click: function( marker ){
                        if ( et_active_marker ){
                            et_active_marker.setAnimation( null );
                            et_active_marker.setIcon( '<?php echo get_template_directory_uri(); ?>/images/red-marker.png' );
                        }
                        et_active_marker = marker;

                        marker.setAnimation( google.maps.Animation.BOUNCE);
                        marker.setIcon( '<?php echo get_template_directory_uri(); ?>/images/blue-marker.png' );
                        $(this).gmap3("get").panTo( marker.position );

                        $.fn.et_simple_slider.external_move_to( marker_order );
                    },
                    mouseover: function( marker ){
                        $( '#' + marker_id ).css( { 'display' : 'block', 'opacity' : 0 } ).stop(true,true).animate( { bottom : '15px', opacity : 1 }, 500 );
                    },
                    mouseout: function( marker ){
                        $( '#' + marker_id ).stop(true,true).animate( { bottom : '50px', opacity : 0 }, 500, function() {
                            $(this).css( { 'display' : 'none' } );
                        } );
                    }
                }
            },
            overlay : {
                latLng : [marker_lat, marker_lng],
                options : {
                    content : marker_description,
                    offset : {
                        y:-42,
                        x:-122
                    }
                }
            }
        });
    }

<?php
$i = 0;
while ( have_posts() ) : the_post();
$et_location_lat = get_post_meta( get_the_ID(), '_et_listing_lat', true );
$et_location_lng = get_post_meta( get_the_ID(), '_et_listing_lng', true );

$et_location_rating = '<div class="location-rating"></div>';
if ( ( $et_rating = et_get_rating() ) && 0 != $et_rating )
    $et_location_rating = '<div class="location-rating"><span class="et-rating"><span style="' . sprintf( 'width: %dpx;', esc_attr( $et_rating * 17 ) ) . '">    </span></span></div>';

    if ( '' != $et_location_lat && '' != $et_location_lng ) {
?>
            et_add_marker( <?php printf( '%1$d, %2$s, %3$s, \'<div     id="et_marker_%1$d" class="et_marker_info"><div class="location-description"> <div class="location-title"> <h2>%4$s</h2> <div class="listing-info"><p>%5$s</p></div> </div> ' . $et_location_rating . ' </div> <!-- .location-description --> </div> <!-- .et_marker_info -->\'',
            $i,
            esc_html( $et_location_lat ),
            esc_html( $et_location_lng ),
            get_the_title(),
            wp_strip_all_tags( addslashes( get_the_term_list( get_the_ID(), 'listing_type', '', ', ' ) ) )
        ); ?> );
<?php
}

$i++;
endwhile;

rewind_posts();
?>
    })(jQuery)
</script>

0 个答案:

没有答案