使用 javascript 将自定义位置图钉添加到样式化的 Google 地图

传送门

我正在尝试向样式化的谷歌地图添加放置的图钉或自定义弹出窗口。每次我尝试添加图钉时,地图都会重置为其默认颜色。有关如何使两者协同工作的任何线索?

这是样式脚本:

function initMap() {

  // Create a new StyledMapType object, passing it an array of styles,
  // and the name to be displayed on the map type control.
  var styledMapType = new google.maps.StyledMapType(
      [
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ebe3cd"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#523735"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f1e6"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#c9b2a6"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#dcd2be"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#ae9e90"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "landscape.natural",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dfd2ae"
      }
    ]
  },
  {
    "featureType": "poi",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dfd2ae"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#93817c"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#a5b076"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#447530"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f1e6"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#fdfcf8"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f8c967"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#e9bc62"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.highway.controlled_access",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e98d58"
      }
    ]
  },
  {
    "featureType": "road.highway.controlled_access",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#db8555"
      }
    ]
  },
  {
    "featureType": "road.local",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#806b63"
      }
    ]
  },
  {
    "featureType": "transit",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dfd2ae"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#8f7d77"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#ebe3cd"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dfd2ae"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#b9d3c2"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#92998d"
      }
    ]
  }
],
      {name: 'Styled Map'});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 52.5200, lng: 13.4050},
    zoom: 10,
    mapTypeControlOptions: {
      mapTypeIds: []
    }
  });
  
  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('styled_map', styledMapType);
  map.setMapTypeId('styled_map');
}
</script>

这是 pin 脚本:

function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}

如果有一种方法可以仅使用 javascript 在地图上添加弹出框,那也太棒了。目前我正在混合使用 js 和 css,但该网站托管在cargocollective 上,平台有时会在重新加载时删除 div。

提前致谢!

埃尔热克

不能有两个同名的函数。

同样在第二个功能中,您重新创建地图,这就是颜色重置为默认值的原因。

function initMap() {

  // Create a new StyledMapType object, passing it an array of styles,
  // and the name to be displayed on the map type control.
  var styledMapType = new google.maps.StyledMapType(
    [{
        "elementType": "geometry",
        "stylers": [{
          "color": "#ebe3cd"
        }]
      },
      {
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#523735"
        }]
      },
      {
        "elementType": "labels.text.stroke",
        "stylers": [{
          "color": "#f5f1e6"
        }]
      },
      {
        "featureType": "administrative",
        "elementType": "geometry",
        "stylers": [{
          "visibility": "off"
        }]
      },
      {
        "featureType": "administrative",
        "elementType": "geometry.stroke",
        "stylers": [{
          "color": "#c9b2a6"
        }]
      },
      {
        "featureType": "administrative.land_parcel",
        "stylers": [{
          "visibility": "off"
        }]
      },
      {
        "featureType": "administrative.land_parcel",
        "elementType": "geometry.stroke",
        "stylers": [{
          "color": "#dcd2be"
        }]
      },
      {
        "featureType": "administrative.land_parcel",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#ae9e90"
        }]
      },
      {
        "featureType": "administrative.neighborhood",
        "stylers": [{
          "visibility": "off"
        }]
      },
      {
        "featureType": "landscape.natural",
        "elementType": "geometry",
        "stylers": [{
          "color": "#dfd2ae"
        }]
      },
      {
        "featureType": "poi",
        "stylers": [{
          "visibility": "off"
        }]
      },
      {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [{
          "color": "#dfd2ae"
        }]
      },
      {
        "featureType": "poi",
        "elementType": "labels.text",
        "stylers": [{
          "visibility": "off"
        }]
      },
      {
        "featureType": "poi",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#93817c"
        }]
      },
      {
        "featureType": "poi.park",
        "elementType": "geometry.fill",
        "stylers": [{
          "color": "#a5b076"
        }]
      },
      {
        "featureType": "poi.park",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#447530"
        }]
      },
      {
        "featureType": "road",
        "elementType": "geometry",
        "stylers": [{
          "color": "#f5f1e6"
        }]
      },
      {
        "featureType": "road",
        "elementType": "labels",
        "stylers": [{
          "visibility": "off"
        }]
      },
      {
        "featureType": "road",
        "elementType": "labels.icon",
        "stylers": [{
          "visibility": "off"
        }]
      },
      {
        "featureType": "road.arterial",
        "stylers": [{
          "visibility": "off"
        }]
      },
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [{
          "color": "#fdfcf8"
        }]
      },
      {
        "featureType": "road.highway",
        "elementType": "geometry",
        "stylers": [{
          "color": "#f8c967"
        }]
      },
      {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [{
          "color": "#e9bc62"
        }]
      },
      {
        "featureType": "road.highway",
        "elementType": "labels",
        "stylers": [{
          "visibility": "off"
        }]
      },
      {
        "featureType": "road.highway.controlled_access",
        "elementType": "geometry",
        "stylers": [{
          "color": "#e98d58"
        }]
      },
      {
        "featureType": "road.highway.controlled_access",
        "elementType": "geometry.stroke",
        "stylers": [{
          "color": "#db8555"
        }]
      },
      {
        "featureType": "road.local",
        "stylers": [{
          "visibility": "off"
        }]
      },
      {
        "featureType": "road.local",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#806b63"
        }]
      },
      {
        "featureType": "transit",
        "stylers": [{
          "visibility": "off"
        }]
      },
      {
        "featureType": "transit.line",
        "elementType": "geometry",
        "stylers": [{
          "color": "#dfd2ae"
        }]
      },
      {
        "featureType": "transit.line",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#8f7d77"
        }]
      },
      {
        "featureType": "transit.line",
        "elementType": "labels.text.stroke",
        "stylers": [{
          "color": "#ebe3cd"
        }]
      },
      {
        "featureType": "transit.station",
        "elementType": "geometry",
        "stylers": [{
          "color": "#dfd2ae"
        }]
      },
      {
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": [{
          "color": "#b9d3c2"
        }]
      },
      {
        "featureType": "water",
        "elementType": "labels.text",
        "stylers": [{
          "visibility": "off"
        }]
      },
      {
        "featureType": "water",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#92998d"
        }]
      }
    ], {
      name: 'Styled Map'
    });

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 52.5200,
      lng: 13.4050
    },
    zoom: 10,
    mapTypeControlOptions: {
      mapTypeIds: []
    }
  });

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('styled_map', styledMapType);
  map.setMapTypeId('styled_map');

  var myLatLng = {
    lat: -25.363,
    lng: 131.044
  };
  map.setCenter(myLatLng);
  map.setZoom(4);

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}
initMap();
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="width:100%;height:300px;">
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将自定义链接添加到Google地图的文字说明路线中

来自分类Dev

如何使用Cartopy将自定义shapefile添加到地图

来自分类Dev

Google地图:使用自定义按钮

来自分类Dev

使用Javascript在Google地图上设置国家/地区名称的样式

来自分类Dev

经典地图消失后,使用JavaScript创建Google地图

来自分类Dev

将自定义地图样式添加到Mapbox.js

来自分类Dev

使用 JavaScript 代码在 Google 地图中添加更多具有不同位置的标记

来自分类Dev

通过javascript更新Google地图位置

来自分类Dev

通过javascript更新Google地图位置

来自分类Dev

使用JavaScript将数组值添加到地图中?

来自分类Dev

使用角度Google地图获取视口的地图位置

来自分类Dev

如何使用Javascript / JQuery中的Google地图根据我当前的位置显示附近的ATM

来自分类Dev

javascript无法在使用KML层的Google地图上显示用户的当前位置?

来自分类Dev

使用地图图钉segue传递自定义数据

来自分类Dev

使用按钮在Google地图上添加标记

来自分类Dev

如何将自定义地图和自定义数据添加到Highmaps?

来自分类Dev

使用JavaScript在Google地图中绘制多边形

来自分类Dev

不带地图的Google Places API库使用-javascript

来自分类Dev

如何使用JavaScript在Google地图上输出geojon点?

来自分类Dev

使用 Javascript 在 Google 地图中显示/隐藏标记集群

来自分类Dev

将自定义Google地图的位置下载到Android设备

来自分类Dev

如何单击从 JavaScript 嵌入的 Google 地图中的图钉?

来自分类Dev

错误:google.maps.number 不是构造函数,当使用 javascript 将旋转属性添加到谷歌地图中的图标或标记时

来自分类Dev

在Xamarin Android上使用样式化的Google地图

来自分类Dev

使用javascript渲染地图

来自分类Dev

Google地图和异步javascript

来自分类Dev

为什么我无法访问添加到添加到 Google 地图中标记的自定义信息窗口的按钮?

来自分类Dev

WordPress自定义javascript代码中的Google地图加载问题

来自分类Dev

中心光标在Google地图javascript中的点击位置

Related 相关文章

  1. 1

    将自定义链接添加到Google地图的文字说明路线中

  2. 2

    如何使用Cartopy将自定义shapefile添加到地图

  3. 3

    Google地图:使用自定义按钮

  4. 4

    使用Javascript在Google地图上设置国家/地区名称的样式

  5. 5

    经典地图消失后,使用JavaScript创建Google地图

  6. 6

    将自定义地图样式添加到Mapbox.js

  7. 7

    使用 JavaScript 代码在 Google 地图中添加更多具有不同位置的标记

  8. 8

    通过javascript更新Google地图位置

  9. 9

    通过javascript更新Google地图位置

  10. 10

    使用JavaScript将数组值添加到地图中?

  11. 11

    使用角度Google地图获取视口的地图位置

  12. 12

    如何使用Javascript / JQuery中的Google地图根据我当前的位置显示附近的ATM

  13. 13

    javascript无法在使用KML层的Google地图上显示用户的当前位置?

  14. 14

    使用地图图钉segue传递自定义数据

  15. 15

    使用按钮在Google地图上添加标记

  16. 16

    如何将自定义地图和自定义数据添加到Highmaps?

  17. 17

    使用JavaScript在Google地图中绘制多边形

  18. 18

    不带地图的Google Places API库使用-javascript

  19. 19

    如何使用JavaScript在Google地图上输出geojon点?

  20. 20

    使用 Javascript 在 Google 地图中显示/隐藏标记集群

  21. 21

    将自定义Google地图的位置下载到Android设备

  22. 22

    如何单击从 JavaScript 嵌入的 Google 地图中的图钉?

  23. 23

    错误:google.maps.number 不是构造函数,当使用 javascript 将旋转属性添加到谷歌地图中的图标或标记时

  24. 24

    在Xamarin Android上使用样式化的Google地图

  25. 25

    使用javascript渲染地图

  26. 26

    Google地图和异步javascript

  27. 27

    为什么我无法访问添加到添加到 Google 地图中标记的自定义信息窗口的按钮?

  28. 28

    WordPress自定义javascript代码中的Google地图加载问题

  29. 29

    中心光标在Google地图javascript中的点击位置

热门标签

归档