2017-04-18 81 views
0

我用了使用谷歌地圖的編輯服務從這裏開始:https://developers.google.com/maps/documentation/javascript/styling如何嵌入風格的谷歌地圖在您的網站

現在這個鏈接給我提供了兩件事情:1。 一個JSON代碼 2.谷歌的API鏈接

,但我不知道如何在我的HTML中使用JSON,在我的網站從JavaScript前,我才嵌入簡單的谷歌地圖[類似變種谷歌新地圖。 PLZ幫助我將這個JSON代碼添加到我的JavaScript或HTML。

這裏是JSON代碼

[ 
{ 
"elementType": "geometry", 
"stylers": [ 
    { 
    "color": "#242f3e" 
    } 
] 
}, 
{ 
"elementType": "labels.text.fill", 
"stylers": [ 
    { 
    "color": "#746855" 
    } 
] 
}, 
{ 
"elementType": "labels.text.stroke", 
"stylers": [ 
    { 
    "color": "#242f3e" 
    } 
] 
}, 
{ 
"featureType": "administrative.country", 
"elementType": "geometry", 
"stylers": [ 
    { 
    "color": "#af01ab" 
    } 
] 
}, 
{ 
"featureType": "administrative.locality", 
"elementType": "geometry", 
"stylers": [ 
    { 
    "color": "#fe70fb" 
    } 
] 
}, 
{ 
"featureType": "administrative.locality", 
"elementType": "labels.text.fill", 
"stylers": [ 
    { 
    "color": "#d59563" 
    } 
] 
}, 
{ 
"featureType": "administrative.province", 
"elementType": "geometry", 
"stylers": [ 
    { 
    "color": "#fe01f8" 
    } 
] 
}, 
{ 
"featureType": "poi", 
"elementType": "labels.text.fill", 
"stylers": [ 
    { 
    "color": "#d59563" 
    } 
] 
}, 
{ 
"featureType": "poi.park", 
"elementType": "geometry", 
"stylers": [ 
    { 
    "color": "#169c03" 
    } 
] 
}, 
{ 
"featureType": "poi.park", 
"elementType": "labels.text.fill", 
"stylers": [ 
    { 
    "color": "#6b9a76" 
    } 
] 
}, 
{ 
"featureType": "road", 
"elementType": "geometry", 
"stylers": [ 
    { 
    "color": "#38414e" 
    } 
] 
}, 
{ 
"featureType": "road", 
"elementType": "geometry.stroke", 
"stylers": [ 
    { 
    "color": "#212a37" 
    } 
] 
}, 
{ 
"featureType": "road", 
"elementType": "labels.text.fill", 
"stylers": [ 
    { 
    "color": "#9ca5b3" 
    } 
] 
}, 
{ 
"featureType": "road.arterial", 
"elementType": "geometry", 
"stylers": [ 
    { 
    "color": "#7274d3" 
    } 
] 
}, 
{ 
"featureType": "road.highway", 
"elementType": "geometry", 
"stylers": [ 
    { 
    "color": "#4d4ddb" 
    } 
] 
}, 
{ 
"featureType": "road.highway", 
"elementType": "geometry.stroke", 
"stylers": [ 
    { 
    "color": "#1f2835" 
    } 
] 
}, 
{ 
"featureType": "road.highway", 
"elementType": "labels.text.fill", 
"stylers": [ 
    { 
    "color": "#f3d19c" 
    } 
] 
}, 
{ 
"featureType": "road.local", 
"elementType": "geometry", 
"stylers": [ 
    { 
    "color": "#9898b8" 
    } 
] 
}, 
{ 
"featureType": "transit", 
"elementType": "geometry", 
"stylers": [ 
    { 
    "color": "#2f3948" 
    } 
] 
}, 
{ 
"featureType": "transit.line", 
"elementType": "geometry", 
"stylers": [ 
    { 
    "color": "#fafe52" 
    } 
] 
}, 
{ 
"featureType": "transit.station", 
"elementType": "labels.text.fill", 
"stylers": [ 
    { 
    "color": "#d59563" 
    } 
] 
}, 
{ 
"featureType": "transit.station.rail", 
"elementType": "geometry", 
"stylers": [ 
    { 
    "color": "#fafe52" 
    } 
] 
}, 
{ 
"featureType": "water", 
"elementType": "geometry", 
"stylers": [ 
    { 
    "color": "#169ba3" 
    } 
] 
}, 
{ 
"featureType": "water", 
"elementType": "labels.text.fill", 
"stylers": [ 
    { 
    "color": "#515c6d" 
    } 
] 
}, 
{ 
"featureType": "water", 
"elementType": "labels.text.stroke", 
"stylers": [ 
    { 
    "color": "#17263c" 
    } 
] 
} 
] 

,這是link

https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&center=29.921068146058925,433.86609008312223&zoom=17&format=png&maptype=roadmap&style=element:geometry%7Ccolor:0x242f3e&style=element:labels.text.fill%7Ccolor:0x746855&style=element:labels.text.stroke%7Ccolor:0x242f3e&style=feature:administrative.country%7Celement:geometry%7Ccolor:0xaf01ab&style=feature:administrative.locality%7Celement:geometry%7Ccolor:0xfe70fb&style=feature:administrative.locality%7Celement:labels.text.fill%7Ccolor:0xd59563&style=feature:administrative.province%7Celement:geometry%7Ccolor:0xfe01f8&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0xd59563&style=feature:poi.park%7Celement:geometry%7Ccolor:0x169c03&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x6b9a76&style=feature:road%7Celement:geometry%7Ccolor:0x38414e&style=feature:road%7Celement:geometry.stroke%7Ccolor:0x212a37&style=feature:road%7Celement:labels.text.fill%7Ccolor:0x9ca5b3&style=feature:road.arterial%7Celement:geometry%7Ccolor:0x7274d3&style=feature:road.highway%7Celement:geometry%7Ccolor:0x4d4ddb&style=feature:road.highway%7Celement:geometry.stroke%7Ccolor:0x1f2835&style=feature:road.highway%7Celement:labels.text.fill%7Ccolor:0xf3d19c&style=feature:road.local%7Celement:geometry%7Ccolor:0x9898b8&style=feature:transit%7Celement:geometry%7Ccolor:0x2f3948&style=feature:transit.line%7Celement:geometry%7Ccolor:0xfafe52&style=feature:transit.station%7Celement:labels.text.fill%7Ccolor:0xd59563&style=feature:transit.station.rail%7Celement:geometry%7Ccolor:0xfafe52&style=feature:water%7Celement:geometry%7Ccolor:0x169ba3&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x515c6d&style=feature:water%7Celement:labels.text.stroke%7Ccolor:0x17263c&size=480x360 
+0

你需要爲這個 –

+0

谷歌地圖API密鑰請參見here @IsmailFarooq我有我的api密鑰,但如何添加json –

+0

您提供的網址缺少API KEY「YOUR_A PI_KEY「請參閱示例https://jsfiddle.net/api/post/library/pure/ –

回答

0

,需要下列步驟顯示在地圖

  1. 獲取谷歌地圖Api key
  2. 啓用Google靜態地圖API https://console.developers.google.com/apis/api/static_maps_backend/overview?PROJECTNAME
  3. 將Google靜態代碼視爲可以使用HTML或CSS進行顯示的圖像。

<img width="600" src="https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&center=29.921068146058925,433.86609008312223&zoom=17&format=png&maptype=roadmap&style=element:geometry%7Ccolor:0x242f3e&style=element:labels.text.fill%7Ccolor:0x746855&style=element:labels.text.stroke%7Ccolor:0x242f3e&style=feature:administrative.country%7Celement:geometry%7Ccolor:0xaf01ab&style=feature:administrative.locality%7Celement:geometry%7Ccolor:0xfe70fb&style=feature:administrative.locality%7Celement:labels.text.fill%7Ccolor:0xd59563&style=feature:administrative.province%7Celement:geometry%7Ccolor:0xfe01f8&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0xd59563&style=feature:poi.park%7Celement:geometry%7Ccolor:0x169c03&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x6b9a76&style=feature:road%7Celement:geometry%7Ccolor:0x38414e&style=feature:road%7Celement:geometry.stroke%7Ccolor:0x212a37&style=feature:road%7Celement:labels.text.fill%7Ccolor:0x9ca5b3&style=feature:road.arterial%7Celement:geometry%7Ccolor:0x7274d3&style=feature:road.highway%7Celement:geometry%7Ccolor:0x4d4ddb&style=feature:road.highway%7Celement:geometry.stroke%7Ccolor:0x1f2835&style=feature:road.highway%7Celement:labels.text.fill%7Ccolor:0xf3d19c&style=feature:road.local%7Celement:geometry%7Ccolor:0x9898b8&style=feature:transit%7Celement:geometry%7Ccolor:0x2f3948&style=feature:transit.line%7Celement:geometry%7Ccolor:0xfafe52&style=feature:transit.station%7Celement:labels.text.fill%7Ccolor:0xd59563&style=feature:transit.station.rail%7Celement:geometry%7Ccolor:0xfafe52&style=feature:water%7Celement:geometry%7Ccolor:0x169ba3&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x515c6d&style=feature:water%7Celement:labels.text.stroke%7Ccolor:0x17263c&size=480x360" alt="Google Map of Albany, NY"> 

更多

如果你想通過JSON做到這一點,你需要看到谷歌official example

+0

感謝您對我的幫助,並請投票選出這個問題。這已經在提升我的聲譽。 –