Overview | Maps JavaScript API | Google Developers
文章推薦指數: 80 %
Welcome to the Maps JavaScript API WebGL beta! This release introduces new WebGL features for the Maps JavaScript API, which adds the following capabilities ... 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 Language 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 MapsJavaScriptAPI Overview SetupinCloudConsole UsingAPIKeys Tutorials Alltutorials Addamarkertoyourmap Clustermarkers Real-timecollaborativemapping Showcurrentlocation Usedatawithyourmap ImportingJSONdataVisualizingJSONdataCombiningJSONdata AddingaMapandMarkerstoaReactApplication Concepts Allconcepts Maptypes Mapandtilecoordinates Localizingthemap Versioning URLparameters Bestpractices UsingTypeScript Promises Managemarkerlabelcollisions Customizeamap CustomizewithCloudbasedmapsstyling CustomizewithJSONstyling JSONstylingoverviewJSONstylereference CustomLegends Interactwiththemap Controls Events Controlzoomandpan Drawonthemap Overview Markers Custommarkers Infowindows Shapes Symbols WebGLFeatures OverviewVectorMapsTiltandRotationWebGLOverlayView Deck.gldatavisualizations Groundoverlays Customoverlays Displaydata Overview Datalayer Heatmap DisplayKML KMLandGeoRSS Traffic,Transit,andBicyclingLayers Services Directions DistanceMatrix Elevation Geocoding MaximumZoomImagery StreetView Libraries Overview DrawingLibrary GeometryLibrary LocalContextLibrary(Beta) OverviewGetStartedSettingLocalContextandMapOptionsHandlingEventsandUserInteractionRefreshingSearchPropertiesStylingtheLocalContextMapViewSupportedPlaceTypesMigratingaMaptoLocalContextMapView PlacesLibrary PlaceAutocomplete VisualizationLibrary OpenSourceLibraries MoreGuides ContentSecurityPolicyGuide GoogleLoaderMigrationGuide PlaceFieldMigration(open_now,utc_offset) PlaceDataFields PlaceIcons PlaceIDs PlaceTypes Upgradingfromv2tov3 PoliciesandTerms Usageandbilling Reportingandmonitoring Termsofservice OtherAPIs MapsStaticAPI StreetViewStaticAPI MapsEmbedAPI MapsURLs 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 Sendfeedback Overview WelcometotheMapsJavaScriptAPIWebGLbeta!Thisrelease introducesnewWebGLfeaturesfortheMapsJavaScriptAPI, whichaddsthefollowingcapabilitiesforvectormaps: WebGLOverlayView letsyouaddcustom2Dand3Dgraphicsandanimatedcontenttoyourmaps. Tiltandheading cannowbeadjustedprogrammatically,andbyusingmouseandkeyboard gestures. map.moveCamera() letsyousimultaneouslychangemultiplecameraproperties. Zoomnowsupportsfractionalvalues. Getstarted InordertousethenewWebGLfeatures,youneedamapIDthatusesthe vectormap.You'llalsoneedto updateyourAPIbootstraprequest.Thissectionshowsyouhow. CreateanewmapID TocreateanewmapID,followthestepsin UsingCloud-basedMapStyling-GetaMapID. BesuretosettheMaptypetoJavaScript,andselecttheVector option.CheckTiltand/orRotationtoenabletiltandrotationonthe map.Doingsowillallowyoutoprogrammaticallyadjustthesevalues,andalso letsusersadjusttiltandheadingdirectlyonthemap.Iftheuseoftiltor headingwilladverselyaffectyourapp,leaveTiltandRotationun- checkedsouserswillnotbeabletoadjusttiltandrotation. Updateyourmapinitializationcode ThisrequiresthemapIDyoujustcreated.Itcanbefoundonyour Maps Managementpage. Usev=betainyourAPIscripttag. Forexample: ProvideamapIDwhenyouinstantiatethemapusingthemapIdproperty asshownhere: map=newgoogle.maps.Map(document.getElementById('map'),{ center:{lat:-34.397,lng:150.644}, zoom:8, mapId:'MAP_ID' }); Important:YourmapIDandAPIkeymustbeassociatedwiththesameGoogleCloudConsoleproject. Examples Exampleshavebeenprovidedtodemonstratethesefeatures: WebGLOverlayView WebGLTiltandRotation WebGLFeatureTour WebGLTravelAppDemo Sendfeedback Exceptasotherwisenoted,thecontentofthispageislicensedundertheCreativeCommonsAttribution4.0License,andcodesamplesarelicensedundertheApache2.0License.Fordetails,seetheGoogleDevelopersSitePolicies.JavaisaregisteredtrademarkofOracleand/oritsaffiliates. Lastupdated2022-02-28UTC. [{ "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 Language English BahasaIndonesia Deutsch Español Français Português–Brasil Русский 中文–简体 日本語 한국어
延伸文章資訊
- 1如何在谷歌瀏覽器中啟用WebGL - IK4 ▷➡️
如果由於某種原因不支持WebGL,則可以嘗試更新視頻卡驅動程序。 另一種可能是這種情況是由於硬件加速功能被禁用而導致的,該功能阻止了最新版本的Google Chrome瀏覽器的 ...
- 2我收到一條WebGL 錯誤消息。
為了提供最佳體驗,Adobe Spark 需要一種名為WebGL 的網頁技術來產生互動式3D 和2D 圖形。所有現的代瀏覽器都支持WebGL 資料庫(例如:Google Chrome、Mozil...
- 3Enabling WebGL on Chrome - SmartBear Support
Google Chrome is a very customizable browser, allowing you to to change many of your settings to ...
- 4WebGL - 維基百科,自由的百科全書
Google Chrome – 從9.0開始支援預設啟用。 · Internet Explorer – 從11開始支援。 · Mozilla Firefox – 從4.0開始支援預設啟用。 · ...
- 5How To Enable WebGL(browser) in Chrome - Interplay Learning