使用Google Maps API 3和JS创建样式器
[英]Create styler using google maps api 3 and js
问题描述
So, I want to create my own stylers on my map. 
因此，我想在地图上创建自己的样式器。 For example, suppose that I want to put some flowers (or something else) in the country's limits, how can I do it? 例如，假设我想在该国的范围内放一些花（或其他东西），该怎么办？
I use the google maps's stylers but there is a limit: we may use the different stylers (opacity, color ...) provided by google. 我使用了谷歌地图的样式器，但有一个限制：我们可能会使用谷歌提供的不同样式器（不透明度，颜色...）。 How can I create my own styler? 如何创建自己的样式器？
My map use stylers like stylers you can find here on google developer web site. 我的地图使用造型器像造型器，你可以找到在这里对谷歌开发者网站。 The documentation does not describe my problem and I tried to find some other ways in some web sites like stack overflow without success. 该文档没有描述我的问题，我试图在某些网站中找到其他方法，例如堆栈溢出，但没有成功。
I will use in example the map of the documentation in order to simplified the example. 为了简化示例，我将在示例中使用文档图。 So, this is my code: 所以，这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Styled Map Types</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
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.stroke',
stylers: [{color: '#c9b2a6'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'geometry.stroke',
stylers: [{color: '#dcd2be'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [{color: '#ae9e90'}]
},
{
featureType: 'landscape.natural',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
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.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.controlled_access',
elementType: 'geometry',
stylers: [{color: '#e98d58'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry.stroke',
stylers: [{color: '#db8555'}]
},
{
featureType: 'road.local',
elementType: 'labels.text.fill',
stylers: [{color: '#806b63'}]
},
{
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.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: 55.647, lng: 37.581},
zoom: 11,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map']
}
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
2 个解决方案
解决方案1
2 2017-08-10 14:04:34
You could try working on custom layers. 您可以尝试在自定义图层上工作。
Source: 资源：
http://www.makeuseof.com/tag/get-creative-and-make-your-own-maps-with-custom-layers-on-the-new-google-maps/ http://www.makeuseof.com/tag/get-creative-and-make-your-own-maps-with-custom-layers-on-the-new-google-maps/
解决方案2
1 2017-08-12 06:56:55
have you done reading/using the google custom markers?. 您是否已阅读/使用Google自定义标记？ If not visit google custom marker this might answer your question, who knows. 如果不访问google自定义标记，这可能会回答您的问题，谁知道。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.