'tag.htm'; break; case 'flag': $pre .= $default_pre .= 'flag.htm'; break; case 'my': $pre .= $default_pre .= 'my.htm'; break; case 'my_password': $pre .= $default_pre .= 'my_password.htm'; break; case 'my_bind': $pre .= $default_pre .= 'my_bind.htm'; break; case 'my_avatar': $pre .= $default_pre .= 'my_avatar.htm'; break; case 'home_article': $pre .= $default_pre .= 'home_article.htm'; break; case 'home_comment': $pre .= $default_pre .= 'home_comment.htm'; break; case 'user': $pre .= $default_pre .= 'user.htm'; break; case 'user_login': $pre .= $default_pre .= 'user_login.htm'; break; case 'user_create': $pre .= $default_pre .= 'user_create.htm'; break; case 'user_resetpw': $pre .= $default_pre .= 'user_resetpw.htm'; break; case 'user_resetpw_complete': $pre .= $default_pre .= 'user_resetpw_complete.htm'; break; case 'user_comment': $pre .= $default_pre .= 'user_comment.htm'; break; case 'single_page': $pre .= $default_pre .= 'single_page.htm'; break; case 'search': $pre .= $default_pre .= 'search.htm'; break; case 'operate_sticky': $pre .= $default_pre .= 'operate_sticky.htm'; break; case 'operate_close': $pre .= $default_pre .= 'operate_close.htm'; break; case 'operate_delete': $pre .= $default_pre .= 'operate_delete.htm'; break; case 'operate_move': $pre .= $default_pre .= 'operate_move.htm'; break; case '404': $pre .= $default_pre .= '404.htm'; break; case 'read_404': $pre .= $default_pre .= 'read_404.htm'; break; case 'list_404': $pre .= $default_pre .= 'list_404.htm'; break; default: $pre .= $default_pre .= theme_mode_pre(); break; } if ($config['theme']) { $conffile = APP_PATH . 'view/template/' . $config['theme'] . '/conf.json'; $json = is_file($conffile) ? xn_json_decode(file_get_contents($conffile)) : array(); } !empty($json['installed']) and $path_file = APP_PATH . 'view/template/' . $config['theme'] . '/htm/' . ($id ? $id . '_' : '') . $pre; (empty($path_file) || !is_file($path_file)) and $path_file = APP_PATH . 'view/template/' . $config['theme'] . '/htm/' . $pre; if (!empty($config['theme_child']) && is_array($config['theme_child'])) { foreach ($config['theme_child'] as $theme) { if (empty($theme) || is_array($theme)) continue; $path_file = APP_PATH . 'view/template/' . $theme . '/htm/' . ($id ? $id . '_' : '') . $pre; !is_file($path_file) and $path_file = APP_PATH . 'view/template/' . $theme . '/htm/' . $pre; } } !is_file($path_file) and $path_file = APP_PATH . ($dir ? 'plugin/' . $dir . '/view/htm/' : 'view/htm/') . $default_pre; return $path_file; } function theme_mode_pre($type = 0) { global $config; $mode = $config['setting']['website_mode']; $pre = ''; if (1 == $mode) { $pre .= 2 == $type ? 'portal_category.htm' : 'portal.htm'; } elseif (2 == $mode) { $pre .= 2 == $type ? 'flat_category.htm' : 'flat.htm'; } else { $pre .= 2 == $type ? 'index_category.htm' : 'index.htm'; } return $pre; } ?>javascript - Google Maps Directions using 1-2-3 instead of A-B-C - Stack Overflow
最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Google Maps Directions using 1-2-3 instead of A-B-C - Stack Overflow

programmeradmin0浏览0评论

I'm using the Google Maps API on Google Maps.

The thing is that, It shows me several stations throughout the path, labeling them as A-B-C-D...Z, but I need to change it as 1-2-3-4-..99,

Here is my code;

directionsService.route({
    origin: $( "#input-directions-start-point" ).val(),
    destination: $( "#input-directions-end-point" ).val(),
    waypoints: waypts, //other duration points
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      console.log(response);
    } else {
      vts.alertDialog( window.localization.error,
        window.localization.error_direction_calculate + ": " + status,
        BootstrapDialog.TYPE_DANGER);
    }
  });

Here is the Screen Shot;

Thanks in Advance

I'm using the Google Maps API on Google Maps.

The thing is that, It shows me several stations throughout the path, labeling them as A-B-C-D...Z, but I need to change it as 1-2-3-4-..99,

Here is my code;

directionsService.route({
    origin: $( "#input-directions-start-point" ).val(),
    destination: $( "#input-directions-end-point" ).val(),
    waypoints: waypts, //other duration points
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      console.log(response);
    } else {
      vts.alertDialog( window.localization.error,
        window.localization.error_direction_calculate + ": " + status,
        BootstrapDialog.TYPE_DANGER);
    }
  });

Here is the Screen Shot;

Thanks in Advance

Share Improve this question edited Jun 14, 2016 at 9:35 duncan 31.9k15 gold badges81 silver badges101 bronze badges asked Jun 14, 2016 at 9:22 NewPHPerNewPHPer 2377 silver badges22 bronze badges 3
  • 1 And what have you tried? Your code doesn't show an attempt to replace the default markers. – MrUpsidown Commented Jun 14, 2016 at 10:12
  • I dont have any idea to solve. API does not support the feature – NewPHPer Commented Jun 14, 2016 at 10:37
  • 1 The DirectionsRendererOptions has a suppressMarkers property. See developers.google./maps/documentation/javascript/…. If you have your different waypoints coordinates, I suppose you could place your own markers instead of the default ones. – MrUpsidown Commented Jun 14, 2016 at 11:42
Add a ment  | 

1 Answer 1

Reset to default 6

google.maps.DirectionsRendererOptions has property suppressMarkers which when you set to true, will only render the path but not markers.

You can then render the markers yourself using for example google.maps.Marker, which has label attribute using which you can specify the label inside the marker, which can be for example a number (You can also create your own very custom marker by extending google.maps.OverlayView class, or use RichMarker library). The position of the markers on route can be parsed from response object of directionsService.

More in docs.

Working example:

function init(){
    directionsService = new google.maps.DirectionsService();

    var pos = new google.maps.LatLng(41.218624, -73.748358);
    var myOptions = {
        zoom: 15,
        center: pos,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map'), myOptions);
    directionsDisplay = new google.maps.DirectionsRenderer({map: map, suppressMarkers: true});

    directionsService.route({
        origin: "New York",
        destination: "Chicago",
        waypoints: [{location:"Philadelphia"}, {location:"Boston"}], //other duration points
        optimizeWaypoints: true,
        travelMode: google.maps.TravelMode.DRIVING
    }, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
			var my_route = response.routes[0];
            for (var i = 0; i < my_route.legs.length; i++) {
                var marker = new google.maps.Marker({
                    position: my_route.legs[i].start_location,
                    label: ""+(i+1),
                    map: map
                });
            }
            var marker = new google.maps.Marker({
                position: my_route.legs[i-1].end_location,
                label: ""+(i+1),
                map: map
            });
        } else {
            vts.alertDialog( window.localization.error,
                window.localization.error_direction_calculate + ": " + status,
                BootstrapDialog.TYPE_DANGER);
        }
    });

}    
<script type="text/javascript" src="http://www.google./jsapi"></script>
<script type="text/javascript">
  google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body style="margin:0px; padding:0px;" onload="init()">
	 <div id="map" style="height:400px; width:500px;"></div>
</body>

发布评论

评论列表(0)

  1. 暂无评论