如何在您的网站中嵌入样式化的谷歌地图

Posted

技术标签:

【中文标题】如何在您的网站中嵌入样式化的谷歌地图【英文标题】：how to embed styled google map in your site 【发布时间】：2017-09-13 22:29:33 【问题描述】：

我从这里使用过谷歌地图编辑服务：https://developers.google.com/maps/documentation/javascript/styling

现在这个链接为我提供了两件事： 1.一个json码 2. google api链接

但我不知道如何在我的 html 中使用 json，之前我已经通过 javascript [类似于 var google new map] 在我的网站中嵌入了简单的谷歌地图。请帮助我将此 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

【问题讨论】：

你需要谷歌地图API密钥 @IsmailFarooq 我有我的 api 密钥但是如何添加 json 您提供的 url 缺少 API KEY "YOUR_API_KEY" 参见示例jsfiddle.net/api/post/library/pure 我知道我认为它不允许在堆栈上共享。因为每次我分享我的 api 密钥时，都会有人编辑我的帖子并删除 api 密钥。所以这次我没有添加@IsmailFarooq 感谢您的帮助，它对我有用。请避免讨论。而且，请投票给这个问题。它已经在损害我的声誉。 【参考方案1】：

显示地图需要以下步骤

    获取谷歌地图Api key 启用 Google 静态地图 API https://console.developers.google.com/apis/api/static_maps_backend/overview?PROJECTNAME 将 Google 静态代码视为可以使用 HTML 或 CSS 显示的图像。

示例

<img  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" >

更多信息请见here

如果您想通过 JSON 进行操作，您需要查看 google official example

【讨论】：

以上是关于如何在您的网站中嵌入样式化的谷歌地图的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Reactjs 中的谷歌地图上嵌入一个确切的位置

如何从新的谷歌地图嵌入中删除框？

如何使用地形地图类型设置基于云的谷歌地图样式？

从嵌入的谷歌地图中删除气球

如何删除谷歌地图标题？

尽管准确的纬度/经度，但是〜100米的谷歌地图嵌入不正确