将来自 Google Maps API Wizard 的 JSON 合并到现有的 html 中 [英] Incorporating JSON from Google Maps API Wizard into existing html

问题描述

我正在尝试为 Google 融合表自定义底图.我正在使用地图 API 样式向导并创建了我想要的地图，但我不知道如何将地图向导生成的 JSON 代码合并到现有页面的 html 代码中:

这是我想自定义的地图:http://shatterbe.lt/ses_maps/per_capita_upper_eastside.html

这是 API Map 向导给我的代码:

<预><代码>[{造型师":[{可见性":简化"}]},{"featureType": "road.highway",造型师":[{可见性":关闭"}]}]

有人帮忙吗?我知道答案可能很简单，但我对这一切都很陌生！

解决方案

这对我有用:

函数初始化(){var map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {中心:新 google.maps.LatLng(25.826923725271442, -80.18369569667362),缩放:14，mapTypeId: google.maps.MapTypeId.ROADMAP});map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));层 = 新 google.maps.FusionTablesLayer({地图:地图，样式: [{造型师":[{可见性":简化"}]},{"featureType": "road.highway",造型师":[{可见性":关闭"}]}],热图:{启用:假}，询问: {选择:col6"，来自:1_atSM8PGxxDThZlVGvFw4WlyaYHKuXU9CoCvGU0"，在哪里: ""},选项: {样式 ID:2，模板 ID:2}});}

介绍如何向地图添加样式的文档

文档中的示例

I'm trying to customize the base map for a google fusion table. I'm using the Maps API Style Wizard and have created the map I want, but I'm at a loss as to how to incorporate the JSON code generated by the Map wizard into the html code for the existing page:

This is the map I'd like to customize: http://shatterbe.lt/ses_maps/per_capita_upper_eastside.html

And this is the code that the API Map wizard gave me:

[
  {
    "stylers": [
      { "visibility": "simplified" }
    ]
  },{
    "featureType": "road.highway",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

Someone help? I know the answer is probably very simple, but I'm new to all of this!

解决方案

This works for me:

function initialize() {
  var map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
    center: new google.maps.LatLng(25.826923725271442, -80.18369569667362),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

  layer = new google.maps.FusionTablesLayer({
    map: map,
    styles: [
       {
         "stylers": [
           { "visibility": "simplified" }
         ]
       },{
        "featureType": "road.highway",
         "stylers": [
          { "visibility": "off" }
         ]
       }
    ],
    heatmap: { enabled: false },
    query: {
      select: "col6",
      from: "1_atSM8PGxxDThZlVGvFw4WlyaYHKuXU9CoCvGU0",
      where: ""
    },
    options: {
      styleId: 2,
      templateId: 2
    }
  });
}

Documentation describing how to add styling to the map

Example from the documentation

这篇关于将来自 Google Maps API Wizard 的 JSON 合并到现有的 html 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！