Apple Maps on the Web - Maps- Apple Developer

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

MapKit JS Dashboard

Track your website’s use of Apple Maps services with the MapKit JS Dashboard. Monitor map initializations and service requests in real time, or view up to a year of activity by day, week, month, or year.

MapKit JS provides a free daily limit of 250,000 map views and 25,000 service calls per Apple Developer Program membership. For additional capacity needs, contact us .

Go to the MapKit JS Dashboard

Snapshots

Snapshots are static map images retrieved from a URL that you can customize to display a region of the world, mark specific points with different styles of annotations and overlays, show the Dark Mode map, and more. Use Snapshots whenever you don't need an interactive map or where you'd use a typical image URL — for example, in websites and in places where JavaScript isn’t available, such as email clients.

Snapshots offer a free daily limit of 25,000 unique requests per day per Apple Developer Program membership. For additional capacity needs, contact us .

Learn more about Maps Web Snapshots

View Snapshots Studio

Session videos

See the latest in location and map technologies presented at WWDC and other events.

Watch video Documentation

Browse MapKit JS documentation for the latest API reference and technical articles.

Read documentation Forums

Ask questions and discuss development topics with Apple engineers and other developers.

View forums < meta charset = "utf-8" > < script src = "https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js" ></ script > < style > # map { width : 100 % ; height : 600 px ; </ style > </ head > < div id = "map" ></ div > < script > mapkit . init ({ authorizationCallback : function ( done ) { var xhr = new XMLHttpRequest (); xhr . open ( "GET" , "/services/jwt" ); xhr . addEventListener ( "load" , function () { done ( this . responseText ); xhr . send (); var Cupertino = new mapkit . CoordinateRegion ( new mapkit . Coordinate ( 37.3316850890998 , - 122.030067374026 ), new mapkit . CoordinateSpan ( 0.167647972 , 0.354985255 ) var map = new mapkit . Map ( "map" ); map . region = Cupertino ; </ script > </ body > </ html > < meta charset = "utf-8" > < script src = "https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js" ></ script > < style > # map { height : 600 px ; </ style > </ head > < div id = "map" ></ div > < script > var MarkerAnnotation = mapkit . MarkerAnnotation , clickAnnotation ; var sfo = new mapkit . Coordinate ( 37.616934 , - 122.383790 ), work = new mapkit . Coordinate ( 37.3349 , - 122.0090201 ); mapkit . init ({ authorizationCallback : function ( done ) { var xhr = new XMLHttpRequest (); xhr . open ( "GET" , "/services/jwt" ); xhr . addEventListener ( "load" , function () { done ( this . responseText ); xhr . send (); var map = new mapkit . Map ( "map" ); // Setting properties on creation: var sfoAnnotation = new MarkerAnnotation ( sfo , { color : "#f4a56d" , title : "SFO" , glyphText : "✈️" }); // Setting properties after creation: var workAnnotation = new MarkerAnnotation ( work ); workAnnotation . color = "#969696" ; workAnnotation . title = "Work" ; workAnnotation . subtitle = "Apple Park" ; workAnnotation . selected = "true" ; workAnnotation . glyphText = "" ; // Add and show both annotations on the map map . showItems ([ sfoAnnotation , workAnnotation ]); // Drop an annotation where a Shift-click is detected: map . element . addEventListener ( "click" , function ( event ) { if ( ! event . shiftKey ) { return ; if ( clickAnnotation ) { map . removeAnnotation ( clickAnnotation ); var coordinate = map . convertPointOnPageToCoordinate ( new DOMPoint ( event . pageX , event . pageY )); clickAnnotation = new MarkerAnnotation ( coordinate , { title : "Click!" , color : "#c969e0" map . addAnnotation ( clickAnnotation ); </ script > </ body > </ html > < meta charset = "utf-8" > < script src = "https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js" ></ script > < style > # map { height : 600 px ; a : link , a : visited { color : #2aaef5 ; outline : none ; text-decoration : none ; . landmark { width : 250 px ; padding : 7 px 0 0 0 ; background : rgba ( 247 , 247 , 247 , 0.75 ); border-radius : 5 px ; box-shadow : 10 px 10 px 50 px rgba ( 0 , 0 , 0 , 0.29 ); font-family : Helvetica , Arial , sans-serif ; -webkit- transform-origin : 0 10 px ; transform-origin : 0 10 px ; . landmark h1 { margin-top : 0 ; padding : 5 px 15 px ; background : #2aaef5 ; color : rgba ( 255 , 255 , 255 , 0.9 ); font-size : 16 px ; font-weight : 300 ; . landmark section { padding : 0 15 px 5 px ; font-size : 14 px ; . landmark section p { margin : 5 px 0 ; . landmark : after { content : "" ; position : absolute ; top : 7 px ; left : -13 px ; width : 0 ; height : 0 ; margin-bottom : -13 px ; border-right : 13 px solid #2aaef5 ; border-top : 13 px solid rgba ( 0 , 0 , 0 , 0 ); border-bottom : 13 px solid rgba ( 0 , 0 , 0 , 0 ); @ -webkit-keyframes scale-and-fadein { 0 % { -webkit- transform : scale ( 0.2 ); opacity : 0 ; 100 % { -webkit- transform : scale ( 1 ); opacity : 1 ; @ keyframes scale-and-fadein { 0 % { transform : scale ( 0.2 ); opacity : 0 ; 100 % { transform : scale ( 1 ); opacity : 1 ; </ style > </ head > < div id = "map" ></ div > < script > mapkit . init ({ authorizationCallback : function ( done ) { var xhr = new XMLHttpRequest (); xhr . open ( "GET" , "/services/jwt" ); xhr . addEventListener ( "load" , function () { done ( this . responseText ); xhr . send (); // Landmarks data var sanFranciscoLandmarks = [ { coordinate : new mapkit . Coordinate ( 37.7951315 , - 122.402986 ), title : "Transamerica Pyramid" , phone : "+1-415-983-5420" , url : "http://www.transamericapyramidcenter.com/" }, { coordinate : new mapkit . Coordinate ( 37.7954201 , - 122.39352 ), title : "Ferry Building" , phone : "+1 (415) 983-8030" , url : "http://www.ferrybuildingmarketplace.com" }, { coordinate : new mapkit . Coordinate ( 37.8083396 , - 122.415727 ), title : "Fisherman's Wharf" , phone : "+1 (415) 673-3530" , url : "http://visitfishermanswharf.com" }, { coordinate : new mapkit . Coordinate ( 37.8023553 , - 122.405742 ), title : "Coit Tower" , phone : "+1 (415) 249-0995" , url : "http://sfrecpark.org/destination/telegraph-hill-pioneer-park/coit-tower/" }, { coordinate : new mapkit . Coordinate ( 37.7552305 , - 122.452624 ), title : "Sutro Tower" , phone : "+1 (415) 681-8850" , url : "http://www.sutrotower.com" }, { coordinate : new mapkit . Coordinate ( 37.779267 , - 122.419269 ), title : "City Hall" , phone : "+1 (415) 701-2311" , url : "http://sfgsa.org/index.aspx?page=1085" }, { coordinate : new mapkit . Coordinate ( 37.8184493 , - 122.478409 ), title : "Golden Gate Bridge" , phone : "+1 (415) 921-5858" , url : "http://www.goldengatebridge.org" }, { coordinate : new mapkit . Coordinate ( 37.7785538 , - 122.514035 ), title : "Cliff House" , phone : "+1 (415) 386-3330" , url : "http://www.cliffhouse.com/" } // Landmark annotation callout delegate var CALLOUT_OFFSET = new DOMPoint ( - 148 , - 78 ); var landmarkAnnotationCallout = { calloutElementForAnnotation : function ( annotation ) { return calloutForLandmarkAnnotation ( annotation ); calloutAnchorOffsetForAnnotation : function ( annotation , element ) { return CALLOUT_OFFSET ; calloutAppearanceAnimationForAnnotation : function ( annotation ) { return ".4s cubic-bezier(0.4, 0, 0, 1.5) 0s 1 normal scale-and-fadein" ; // Landmarks annotations var annotations = sanFranciscoLandmarks . map ( function ( landmark ) { var annotation = new mapkit . MarkerAnnotation ( landmark . coordinate , { callout : landmarkAnnotationCallout , color : "#c969e0" annotation . landmark = landmark ; return annotation ; var map = new mapkit . Map ( "map" ); map . showItems ( annotations ); // Landmark annotation custom callout function calloutForLandmarkAnnotation ( annotation ) { var div = document . createElement ( "div" ); div . className = "landmark" ; var title = div . appendChild ( document . createElement ( "h1" )); title . textContent = annotation . landmark . title ; var section = div . appendChild ( document . createElement ( "section" )); var phone = section . appendChild ( document . createElement ( "p" )); phone . className = "phone" ; phone . textContent = annotation . landmark . phone ; var link = section . appendChild ( document . createElement ( "p" )); link . className = "homepage" ; var a = link . appendChild ( document . createElement ( "a" )); a . href = annotation . landmark . url ; a . textContent = "website" ; return div ; </ script > </ body > </ html > < meta charset = "utf-8" > < script src = "https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js" ></ script > < style type = "text/css" > html , body , # container { height : 100 % ; overflow : hidden ; body { margin : 0 ; padding : 0 ; # loupe { width : 200 px ; width : 20 vw ; height : 200 px ; height : 20 vw ; position : absolute ; top : 11 px ; left : 11 px ; overflow : hidden ; border : 8 px solid #FFF ; -webkit- box-shadow : 0 0 5 px 4 px rgba ( 0 , 0 , 0 , 0.2 ); -moz- box-shadow : 0 0 5 px 4 px rgba ( 0 , 0 , 0 , 0.2 ); box-shadow : 0 0 5 px 4 px rgba ( 0 , 0 , 0 , 0.2 ); </ style > </ head > < div id = "container" ></ div > < div id = "loupe" ></ div > < script type = "text/javascript" > var MAGNIFICATION_FACTOR = 8 , LOUPE_DIAMETER = 180 ; var center = new mapkit . Coordinate ( 37.7952 , - 122.4028 ); // Transamerica Pyramid, SF mapkit . init ({ authorizationCallback : function ( done ) { var xhr = new XMLHttpRequest (); xhr . open ( "GET" , "/services/jwt" ); xhr . addEventListener ( "load" , function () { done ( this . responseText ); xhr . send (); // Call when the zoom level has changed. // Update the loupe to region centered on the marker that is 8x the map. function calculateMagnifiedRegion ( map , marker ) { var ratio = Math . min ( window . innerWidth , window . innerHeight ) / LOUPE_DIAMETER , delta = map . region . span . latitudeDelta / ( MAGNIFICATION_FACTOR * ratio ), newSpan = new mapkit . CoordinateSpan ( delta , delta ); return new mapkit . CoordinateRegion ( marker . coordinate , newSpan ); var map = new mapkit . Map ( "container" , { center : center }); map . addEventListener ( "zoom-end" , function () { // Update the loupe's magnification after a zoom change zoomedMap . setRegionAnimated ( calculateMagnifiedRegion ( map , marker )); var marker = new mapkit . MarkerAnnotation ( map . center , { draggable : true , selected : true , title : "Drag me" marker . addEventListener ( "drag-start" , function ( event ) { // No need to show "Drag me" message once user has dragged event . target . title = "" ; marker . addEventListener ( "drag-end" , function () { // Center the loupe on the marker's new location zoomedMap . setCenterAnimated ( marker . coordinate ); map . addAnnotation ( marker ); // Initialize the loupe based on the marker's location on the map var zoomedMap = new mapkit . Map ( "loupe" , { isScrollEnabled : false , isZoomEnabled : false , showsCompass : mapkit . FeatureVisibility . Hidden , showsZoomControl : false , showsMapTypeControl : false zoomedMap . setRegionAnimated ( calculateMagnifiedRegion ( map , marker )); </ script > </ body > </ html >

GeoJSON Import

Create a map with an overlay for each state in the U.S. The color of each overlay represents the population in that state. This sample uses GeoJSON data derived from cartographic boundary files and 2018 population estimates provided by the United States Census Bureau . The code shows how to use a delegate when importing GeoJSON data to add style and data to the imported items; the color of each overlay gives an indication of its population, and selecting an overlay displays the the information associated with that state.

< title > GeoJSON Import </ title > < meta charset = "utf-8" > < script src = "https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js" ></ script > < style > html , body { height : 100 % ; overflow : hidden ; body { margin : 0 ; padding : 0 ; font-family : "-apple-system-font" , "HelveticaNeue-Medium" , "Helvetica" , "Arial" , "sans-serif" ; . container { position : relative ; # map { width : 100 % ; max-width : 600 px ; height : 600 px ; # infoPopup { display : none ; top : 7 px ; left : 67 px ; background : #FFFFFF ; padding : 5 px 15 px ; position : absolute ; z-index : 1000 ; min-width : 180 px ; font : 13 px / 16 px "-apple-system-font" , "HelveticaNeue-Medium" , "Helvetica" , "Arial" , "sans-serif" ; color : #212121 ; border : 1 px solid rgba ( 0 , 0 , 0 , 0.2 ); border-radius : 3 px ; . container . map-legend { position : absolute ; z-index : 1000 ; top : 7 px ; left : 7 px ; . map-legend div { margin-bottom : 5 px ; width : 40 px ; font-size : 12 px ; color : #fff ; padding : 4 px 7 px ; # infoPopup . info { padding : 10 px 0 ; box-sizing : border-box ; # infoPopup . info : first-child { border-bottom : 1 px solid rgba ( 0 , 0 , 0 , 0.2 ); # infoPopup . info-country , # infoPopup . info-population { margin-left : 5 px ; color : #464545 ; font-style : italic ; </ style > </ head > < div class = "container" > < div id = "map" ></ div > < div id = "infoPopup" > < div class = "info" > < span > State: </ span > < span class = "info-country" ></ span > </ div > < div class = "info" > < span > Population: </ span > < span class = "info-population" ></ span > </ div > </ div > < div class = "map-legend" ></ div > </ div > < script > var LINE_WIDTH_DEFAULT = 0.5 ; var LINE_WIDTH_SELECTED = 3 ; var MAP_COLORS = [ color : "#fcc5c0" , range : "< 1M" , num : 1000000 color : "#fa9fb5" , range : "1M +" , num : 5000000 color : "#f768a1" , range : "5M +" , num : 10000000 color : "#dd3497" , range : "10M +" , num : 20000000 color : "#ae017e" , range : "20M +" , num : 30000000 color : "#7a0177" , range : "> 30M" , num : Infinity // Initialize mapkit and create a new map. mapkit . init ({ authorizationCallback : function ( done ) { var xhr = new XMLHttpRequest (); xhr . open ( "GET" , "/services/jwt" ); xhr . addEventListener ( "load" , function () { done ( this . responseText ); xhr . send (); var map = new mapkit . Map ( "map" , { isRotationEnabled : false , isZoomEnabled : false , showsZoomControl : false // Setup the UI to show a popup when a state is selected. var infoPopup = document . getElementById ( "infoPopup" ); var infoCountry = infoPopup . querySelector ( ".info-country" ); var infoPopulation = infoPopup . querySelector ( ".info-population" ); var mapLegend = document . querySelector ( ".map-legend" ); function showInfo ( data ) { infoCountry . innerText = data . name ; infoPopulation . innerText = data . population . toLocaleString (); infoPopup . style . display = "block" ; function closeInfo () { infoPopup . style . display = "none" ; function addLegend () { var el , textNode ; MAP_COLORS . forEach ( function ( mColor ) { el = document . createElement ( "div" ); textNode = document . createTextNode ( mColor . range ); el . appendChild ( textNode ); el . style . background = mColor . color ; mapLegend . appendChild ( el ); addLegend (); // Import GeoJSON data with the shape of the states and their population. mapkit . importGeoJSON ( "states.json" , { // Some states are represented as MultiPolygons; we transform them into // a single PolygonOverlay by concatenating the lists of lists of points. itemForMultiPolygon : function ( collection , geoJSON ) { var overlays = collection . getFlattenedItemList (); var points = overlays . reduce ( function ( points , overlay ) { return points . concat ( overlay . points ); }, []); return new mapkit . PolygonOverlay ( points ); // After an overlay has been created for a feature (either directly or through // itemForMultiPolygon above), the properties of the feature are used to add data // and set the style (especially the fill color) based on population count. itemForFeature : function ( overlay , geoJSON ) { var population = geoJSON . properties . population ; // Add data to the overlay to be shown when it is selected. overlay . data = { name : geoJSON . properties . name , population : geoJSON . properties . population // Find the right color for the population and the set the style. for ( var i = 0 ; i < MAP_COLORS . length ; ++ i ) { if ( population < MAP_COLORS [ i ]. num ) { overlay . style = new mapkit . Style ({ fillOpacity : 0.7 , lineWidth : LINE_WIDTH_DEFAULT , fillColor : MAP_COLORS [ i ]. color break ; return overlay ; // When all the data has been imported, we can show the results. geoJSONDidComplete : function ( overlays ) { map . addItems ( overlays ); map . showItems ( overlays . getFlattenedItemList (). filter ( function ( overlay ) { // Focus the map on the continental states at first. var name = overlay . data . name ; return name !== "Alaska" && name !== "Hawaii" ; }), { // Leave some padding for the color key. padding : new mapkit . Padding ( 0 , 0 , 0 , 67 ) // Show info about the selected state. map . addEventListener ( "select" , function ( event ) { if ( event . overlay && event . overlay . data ) { event . overlay . style . lineWidth = LINE_WIDTH_SELECTED ; showInfo ( event . overlay . data ); // Hide info when a state is deselected. map . addEventListener ( "deselect" , function ( event ) { if ( event . overlay ) { event . overlay . style . lineWidth = LINE_WIDTH_DEFAULT ; closeInfo (); </ script > </ body > </ html >

Region and Zoom Limits

Create a map restricted by camera boundaries and zoom range to two cities (San Francisco and Toronto). Click on the desired city to change the region and zoom limits.

< title > Region and Zoom Limits </ title > < meta charset = "utf-8" > < script src = "https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js" ></ script > < style > html , body { height : 100 % ; overflow : hidden ; body { margin : 0 ; padding : 0 ; # city-regions { width : 100 % ; height : 40 px ; cursor : default ; font-family : "-apple-system-font" , Futura , "Helvetica Neue" , "Helvetica" , "Arial" , "sans-serif" ; # city-regions div { float : left ; width : 50 % ; height : 100 % ; text-align : center ; background-color : white ; # city-regions p { margin-top : 9 px ; margin-bottom : 10 px ; # city-regions div . selected-city { background-color : #08f ; color : #f8f9f0 ; # map { width : 100 % ; height : 560 px ; </ style > </ head > < div id = "city-regions" > < div id = "sanfrancisco" > < p > San Francisco </ p > </ div > < div id = "toronto" > < p > Toronto </ p > </ div > </ div > < div id = "map" ></ div > < script > var SELECTED_CITY_CLASS = "selected-city" ; // Define camera boundaries and zoom ranges for San Francisco and Toronto. var CITIES = { sanfrancisco : { region : new mapkit . CoordinateRegion ( new mapkit . Coordinate ( 37.7812 , - 122.44755 ), new mapkit . CoordinateSpan ( 0.10 , 0.11 ) zoomRange : new mapkit . CameraZoomRange ( 250 , 15000 ) toronto : { region : new mapkit . CoordinateRegion ( new mapkit . Coordinate ( 43.6451 , - 79.37505 ), new mapkit . CoordinateSpan ( 0.05 , 0.11 ) zoomRange : new mapkit . CameraZoomRange ( 250 , 20000 ) // Initialize mapkit. mapkit . init ({ authorizationCallback : function ( done ) { var xhr = new XMLHttpRequest (); xhr . open ( "GET" , "/services/jwt" ); xhr . addEventListener ( "load" , function () { done ( this . responseText ); xhr . send (); // Create the map and set the current city to San Francisco when ready. var map = new mapkit . Map ( "map" ); mapkit . addEventListener ( "configuration-change" , function configurationChanged () { mapkit . removeEventListener ( "configuration-change" , configurationChanged ); setCity ( "sanfrancisco" ); // Show the selected city on the map and highlight its name. function setCity ( name ) { // Highlight the current city. var div = document . getElementsByClassName ( SELECTED_CITY_CLASS )[ 0 ]; if ( div ) { div . classList . remove ( SELECTED_CITY_CLASS ); document . getElementById ( name ). classList . add ( SELECTED_CITY_CLASS ); // Show it on the map, with camera boundaries and zoom range for this city. var city = CITIES [ name ]; map . cameraZoomRange = city . zoomRange ; map . cameraBoundary = city . region ; map . region = city . region ; // Listen to click events to change the city. var cityRegionsElement = document . getElementById ( "city-regions" ); cityRegionsElement . addEventListener ( "click" , function ( event ) { setCity ( event . target . id || event . target . parentNode . id ); </ script > </ body > </ html >