带有自定义样式和自定义图钉的 Google 地图
4.38/5 (5投票s)
在这个技巧中，我们将了解如何使用 Google 地图 API 以及带有自定义样式和自定义图钉的 Google 地图。
引言
Google 地图是最好的服务之一。它是一个免费工具，允许您轻松地在您的网站上实现信息丰富的 地图。
在这篇文章中，我们将了解如何使用 Google 地图 API 以及带有自定义样式 控制地图样式的 API 和自定义图钉的 Google 地图。
此技巧解决了 Google 地图中的设计问题，使您可以创建自己的设计，例如水、道路、地图图钉等，这是设计 Google 地图的更好选择。
它帮助模板设计师、网页设计师根据 HTML 设计创建自己的设计。
背景
Google 地图库
首先，将 Google 地图 JavaScript 库 放入<head> 标签中。
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
Google 地图组件
有三个组件可以设置 Google 地图的样式。
featureTypeelementTypestylers
featuretype 用于选择地理对象，例如道路、水域、公园等。我们在这篇文章中使用了一些对象。
行政区划景观兴趣点政府兴趣点道路高速公路交通水域
更多详情，请参考 API 参考文档：Google 地图要素类型规范。
elementtype 用于定位作为地理对象一部分的元素。
stylers 是用于调整对象颜色及其可见性的属性数组。
Using the Code
我们需要添加一个<div> 元素并分配一个 ID。
<div id="pankil"></div>
Google 地图中的样式是用 JavaScript 对象声明的。
window.onload = function () {
var styles = [
//add the scripts here
]
};
我们可以在styles 对象中添加water 的脚本。
window.onload = function () {
var styles = [
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#b2b2b2"
},
{
"visibility": "on"
}
]
}
];
我们可以在现有的styles 对象中添加road 的脚本。
window.onload = function () {
var styles = [
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#b2b2b2"
},
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
}
]
}
];
我们甚至可以将其他脚本添加到现有的 styles 对象中。
我们也可以在脚本中创建自定义pin。
var myMarker1 = new google.maps.Marker({position: new google.maps.LatLng(23.0247119, 72.5714988),
map: map, icon: 'local path of the icon image' });
然后，使用以下函数将地图显示到<div> 容器中
window.onload = function () {
var styles = [
//add the scripts here
]
};
var options = {
mapTypeControlOptions: {
mapTypeIds: ['Styled']
},
center: new google.maps.LatLng(23.0167119, 72.5728762),
zoom: 12,
disableDefaultUI: true,
mapTypeId: 'Styled'
};
var div = document.getElementById('pankil');
var map = new google.maps.Map(div, options);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
var myMarker1 = new google.maps.Marker({position: new google.maps.LatLng(23.0247119, 72.5714988),
map: map, icon: 'p.png' });
}
最后，地图应该添加到页面上。
