我需要以某种方式在每个标记之间创建线
我一直在查看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>