Simple Polylines | Maps JavaScript API - Google Developers
文章推薦指數: 80 %
This example creates a two-pixel-wide red polyline that shows the path of the first trans-Pacific flight between Oakland, CA, and Brisbane, Australia. Google MapsPlatform Overview Products Pricing Documentation GetStarted GetStartedwithGoogleMapsPlatform APIPicker Billing&Pricing Reporting&Monitoring MapIDs FAQ SupportandResources IncidentManagement Maps MapsJavaScriptAPI MapsSDKforAndroid MapsSDKforiOS MapsStaticAPI StreetViewStaticAPI MapsEmbedAPI MapsURLs MapsElevationAPI Routes DirectionsAPI DistanceMatrixAPI RoadsAPI Solutions IndustrySolutions GamingServices TransportationandLogistics Places PlacesAPI PlacesSDKforAndroid PlacesSDKforiOS PlacesLibrary,MapsJavaScriptAPI GeocodingAPI GeolocationAPI TimeZoneAPI AdditionalResources APISecurityBestPractices MapCoverageDetails OptimizationGuide MobileOSandsoftwaresupport Deprecations AssetTrackingPlan RootCAMigrationFAQ URLEncoding WordPressUsers Blog Community StackOverflow GitHub YouTube Discord Twitter IssueTracker English BahasaIndonesia Deutsch Español Français Português–Brasil Русский 中文–简体 日本語 한국어 Signin Web MapsJavaScriptAPI GetStarted Contactsales Guides Reference Samples Support Google MapsPlatform Overview Products Pricing Documentation More Guides Reference Samples Support Blog Community More Overview Basics SimpleMapShowingPixelandTileCoordinatesGeolocationLocalizingtheMapRight-to-LeftLanguagesSynchronousLoadingCustomMapProjectionsLat/LngObjectLiteral Events SimpleClickEventsUsingClosuresinEventListenersAccessingArgumentsinUIEventsGettingPropertiesWithEventHandlersGettingLat/LngfromaClickEventListeningtoDOMEventsPOIClickEvents ControlsandInteraction DefaultControlsDisablingtheDefaultUIReplacingDefaultControlsAddingControlstotheMapControlOptionsControlPositioningCustomControlsAddingStatetoControlsCooperativeGestureHandlingRestrictingMapBoundsResizableSplitMapPanesInsetOverviewMapDelayLoadingDynamicMap DrawingontheMap SimpleMarkersMarkerLabelsRemovingMarkersMarkerswithImageIconsMarkerswithSVGandFontMarkerswithPredefinedSymbolIconsMarkerswithVector-basedIconsComplexMarkerIconsMarkerAccessibilityMarkerAnimationsMarkerAnimationsWithsetTimeout()InfoWindowsInfoWindowsWithmaxWidthCustomPopupsSimplePolylinesRemovingPolylinesDeletingaVertexComplexPolylinesSimplePolygonsPolygonArraysPolygonAuto-CompletionPolygonwithHoleCirclesRectanglesRectangleZoomUser-EditableShapesDraggablePolygonsListeningtoEventsGroundOverlaysRemovingOverlaysCustomOverlaysAnimatingSymbolsArrowSymbols(Polyline)CustomSymbols(Polyline)DashedLineSymbols(Polyline) CustomizingtheMap MarkerCollisionManagement(Beta)StyledMaps-MapIDStyledMaps-NightModeStyledMapTypesHidingMapFeaturesWithStylingStyledMapSelection Layers KMLLayersKMLFeatureDetailsDataLayer:PolygonDataLayer:SimpleDataLayer:StylingDataLayer:EventHandlingDataLayer:DynamicStylingDataLayer:DragandDropGeoJSONDataLayer:EarthquakesHeatmapsGeoRSSLayersTrafficLayerTransitLayerBicycleLayerdeck.glArcLayerdeck.glTripsLayerdeck.glScatterPlotGeoJsonLayer VectorMapFeatures WebGLOverlays(NativeAPI)WebGLOverlays(ThreeJSwrapper)TiltandRotationMoveCameraEasing MapTypes BasicMapTypesOverlayMapTypesImageMapTypesOverlayinganImageMapType45°ImageryRotating45°Imagery Services GeocodingServiceReverseGeocodingGettheAddressforaPlaceIDGeocodingComponentRestrictionRegionCodeBiasing(ES)RegionCodeBiasing(US)DirectionsServiceDisplayingTextDirectionsWithsetPanel()DirectionsService(Complex)TravelModesinDirectionsWaypointsinDirectionsDraggableDirectionsDistanceMatrixServiceElevationServiceShowingElevationAlongaPathStreetViewContainersStreetViewSide-By-SideOverlaysWithinStreetViewStreetViewEventsStreetViewControlsDirectlyAccessingStreetViewDataCustomStreetViewPanoramasCustomStreetViewPanoramaTilesMaximumZoomImageryService Libraries:Drawing DrawingTools Libraries:Geometry NavigationFunctions(Heading)EncodingMethodscontainsLocation() Libraries:LocalContext BasicLocalContextMapViewAdjustingLocalContextSearchBoundsResidentialNeighborhoodViewerCustomizingtheLocalContextMapRespondingtoLocalContextEvents Places PlaceSearchesPlaceDetailsPlaceSearchPaginationPlaceAutocompletePlaceAutocompleteAddressFormPlaceAutocompleteHotelSearchPlaceAutocompleteRestrictedtoMultipleCountriesPlacesSearchBoxRetrievingAutocompletePredictionsPlaceIDFinderPlaceIDGeocoderPlaceAutocompleteandDirections Fun MapPuzzle GetStarted GetStartedwithGoogleMapsPlatform APIPicker Billing&Pricing Reporting&Monitoring MapIDs FAQ SupportandResources IncidentManagement Maps MapsJavaScriptAPI MapsSDKforAndroid MapsSDKforiOS MapsStaticAPI StreetViewStaticAPI MapsEmbedAPI MapsURLs MapsElevationAPI Routes DirectionsAPI DistanceMatrixAPI RoadsAPI Solutions IndustrySolutions GamingServices TransportationandLogistics Places PlacesAPI PlacesSDKforAndroid PlacesSDKforiOS PlacesLibrary,MapsJavaScriptAPI GeocodingAPI GeolocationAPI TimeZoneAPI AdditionalResources APISecurityBestPractices MapCoverageDetails OptimizationGuide MobileOSandsoftwaresupport Deprecations AssetTrackingPlan RootCAMigrationFAQ URLEncoding WordPressUsers StackOverflow GitHub YouTube Discord Twitter IssueTracker Home Products GoogleMapsPlatform Documentation Web MapsJavaScriptAPI Samples Sendfeedback SimplePolylines Thisexamplecreatesatwo-pixel-wideredpolylinethatshowsthepathofthe firsttrans-PacificflightbetweenOakland,CA,andBrisbane,Australia. Readthedocumentation. TrySample Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io GoogleCloudShell CloneSample GitandNode.jsarerequiredtorunthissamplelocally.FollowtheseinstructionstoinstallNode.jsandNPM.Thefollowingcommandsclone,installdependenciesandstartthesampleapplication. gitclone-bsample-polyline-simplehttps://github.com/googlemaps/js-samples.git cdjs-samples npmi npmstart Othersamplescanbetriedbyswitchingtoanybranchbeginningwithsample-SAMPLE_NAME. gitcheckoutsample-SAMPLE_NAME npmi npmstart Sendfeedback Exceptasotherwisenoted,thecontentofthispageislicensedundertheCreativeCommonsAttribution4.0License,andcodesamplesarelicensedundertheApache2.0License.Fordetails,seetheGoogleDevelopersSitePolicies.JavaisaregisteredtrademarkofOracleand/oritsaffiliates. Lastupdated2022-09-02UTC. [{ "type":"thumb-down", "id":"missingTheInformationINeed", "label":"MissingtheinformationIneed" },{ "type":"thumb-down", "id":"tooComplicatedTooManySteps", "label":"Toocomplicated/toomanysteps" },{ "type":"thumb-down", "id":"outOfDate", "label":"Outofdate" },{ "type":"thumb-down", "id":"samplesCodeIssue", "label":"Samples/codeissue" },{ "type":"thumb-down", "id":"otherDown", "label":"Other" }] [{ "type":"thumb-up", "id":"easyToUnderstand", "label":"Easytounderstand" },{ "type":"thumb-up", "id":"solvedMyProblem", "label":"Solvedmyproblem" },{ "type":"thumb-up", "id":"otherUp", "label":"Other" }] Needtotellusmore? StackOverflow Askaquestionunderthegoogle-mapstag. GitHub Forkoursamplesandtrythemyourself. Discord ChatwithfellowdevelopersaboutGoogleMapsPlatform. IssueTracker Somethingwrong?Sendusabugreport! LearnMore FAQ APIPicker Tutorials Platforms Android iOS Web WebServices ProductInfo PricingandPlans ContactSales Support TermsofService Android Chrome Firebase GoogleCloudPlatform Allproducts Terms Privacy SignupfortheGoogleDevelopersnewsletter Subscribe English BahasaIndonesia Deutsch Español Français Português–Brasil Русский 中文–简体 日本語 한국어
延伸文章資訊
- 1Simple Polylines | Maps JavaScript API - Google Developers
This example creates a two-pixel-wide red polyline that shows the path of the first trans-Pacific...
- 2Don't blend a polyline that has crossed lines with itself in webgl
I'm drawing two polylines (which are lines in the sample) in webgl with enabled blending. gl.unif...
- 3WebGL polyline tessellation with tesspathy - Popular Blocks
WebGL polyline tessellation with tesspathy. +-. Leaflet · Open. yet another tessellation of polyl...
- 4Animated lines with WebGL | Sample Code - ArcGIS Developer
... polyline graphics. This description assumes familiarity with WebGL and custom WebGL layer vie...
- 5Robust Polyline Rendering with WebGL - Cesium
Our new method for drawing polylines is to draw a screen-aligned quads for each segment of the li...