获得JSON code从样式化地图向导整合到谷歌地图API的html？ [英] Getting JSON code from Styled Maps Wizard to Integrate into Google Maps API html?
本文介绍了获得JSON code从样式化地图向导整合到谷歌地图API的html？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用了风格的地图向导来创建我的谷歌地图的风格的版本，但我不知道如何将JSON融入我的HTML？任何帮助是AP preciated。谢谢！
这里的code的剪辑。
{
类型特征：road.highway.controlled_access，
造型器：[
{颜色：＃808080}
]
}
此外，这里的链接的jsfiddle 。
下面是我当前所有code的。
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT; META NAME =视CONTENT =初始规模= 1.0，用户可扩展性=无/＆GT;
＆LT;风格类型=文/ CSS＆GT;
HTML {
身高：100％
}
身体 {
高度：100％;
保证金：0;
填充：0
}
#map_canvas {
身高：100％
}
＆LT; /风格＆GT;
＆LT;脚本类型=文/ JavaScript的
src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyAoiYR3lgzcF8CxuOwe7SYsJAPjZQXOhQQ&sensor=false\"></script>
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR线;
VAR称号;
VAR地图;
VAR禄;
无功位置= [];
VAR形象=新google.maps.MarkerImage（'parkingIconRed.png'）; VAR风格= [
{
类型特征：road.highway.controlled_access，
造型器：[
{颜色：＃808080}
]
}，{
类型特征：road.local，
的ElementType：geometry.stroke，
造型器：[
{颜色：＃80d9ff}，
{重：1.6}
]
}，{
类型特征：road.arterial，
的ElementType：geometry.fill，
造型器：[
{颜色：＃d2d3ff}
]
}，{
类型特征：road.arterial，
的ElementType：labels.text.stroke，
造型器：[
{色：#FFFFFF}
]
}，{
类型特征：landscape.man_made，
的ElementType：geometry.fill，
造型器：[
{重：0.1}，
{颜色：＃f3f6f7}
]
}，{
类型特征：road.highway，
造型器：[
{颜色：＃b4b4ff}
]
}，{
类型特征：road.highway，
的ElementType：labels.text.stroke，
造型器：[
{色：#FFFFFF}
]
}，{
类型特征：road.highway，
的ElementType：geometry.stroke，
造型器：[
{颜色：＃808080}
]
}，{
类型特征：poi.school，
造型器：[
{颜色：＃F1F1F1}
]
}，{
类型特征：landscape.man_made，
的ElementType：geometry.stroke，
造型器：[
{颜色：＃808080}，
{重：3.2}
]
}，{
类型特征：行政，
造型器：[
{颜色：＃808080}
]
}，{
}，{
}
]
map.setOptions（{款式：款式}）;
函数初始化（）{
VAR罗利=新google.maps.LatLng（35.77425，-78.639248）;
VAR的MapOptions = {
变焦：17，
MINZOOM：17，
中心：罗利，
mapTypeId设为：google.maps.MapTypeId.ROADMAP
} 地图=新google.maps.Map（的document.getElementById（'map_canvas提供'）的MapOptions）;
VAR太古城中心; / * VAR RLINELayer =新google.maps.KmlLayer（'http://caseymmiller.com/j586/MapsTest/RLINE.kml'）;
RLINELayer.setMap（图）; * / VAR plazaCoords = [
新google.maps.LatLng（35.773893，-78.63854）
新google.maps.LatLng（35.772944，-78.638594）
新google.maps.LatLng（35.772962，-78.639345）
新google.maps.LatLng（35.773884，-78.63928）
]; 太古城中心=新google.maps.Polygon（{
路径：plazaCoords，
则strokeColor：＃33CCFF
strokeOpacity，用于：0.8，
strokeWeight，用于：2，
填充颜色：＃33CCFF
fillOpacity：0.35
}）;
cityPlaza.setMap（地图）; VAR停车场= [
['索尔兹伯里桥面，35.775007，-78.640804]
['卡瓦鲁斯桥面，35.774589，-78.640793]
['汉诺威桥面，35.774511，-78.640031]
['会展中心地下桥面，35.773292，-78.639355]
['演艺桥面，35.772666，-78.641576]
[宪章广场桥面，35.773893，-78.638551]
['布朗特街桥面，35.776226，-78.637499]
['麦克道尔街地面停车，35.775303，-78.641673]
['索尔兹伯里停车场，35.775442，-78.640814]
['会展中心停车场，35.772553，-78.639527]
['勒努瓦街停车场，35.773231，-78.638207]
['Carrabus街停车场，35.774032，-78.63824]
]; 对于（VAR I = 0; I＆LT; parking.length;我++）{
createMarker（停车场[I]）;
} VAR lineCoordinates = [新google.maps.LatLng（35.779742，-78.643389），新google.maps.LatLng（35.77438，-78.643733），新google.maps.LatLng（35.774259，-78.640396），新google.maps.LatLng（ 35.772953，-78.640482），新google.maps.LatLng（35.772866，-78.638465），新google.maps.LatLng（35.776879，-78.638315），新google.maps.LatLng（35.776766，-78.634989），新google.maps。经纬度（35.778097，-78.634883），新google.maps.LatLng（35.778202，-78.638209），新google.maps.LatLng（35.781178，-78.638059）]; VAR lineSymbol = {
路径：google.maps.SymbolPath.CIRCLE，
规模：8，
则strokeColor：'＃000'
}; 行=新google.maps.Polyline（{
路径：lineCoordinates，
则strokeColor：'＃C82536'，
图标：[{
图标：lineSymbol，
偏移：'100％'
}]，
地图：地图
}）;
animateCircle（）;
} 功能animateCircle（）{
变种数= 0;
VAR时间= offsetId = window.setInterval（函数（）{
数=（数+ 1）％2400; VAR图标= line.get（'图标'）;
图标[0] = .offset（数/ 24）+'％';
line.set（'图标，图标）;
}，20）;
} 功能createMarker（停车场）{
VAR myLatLng =新google.maps.LatLng（停车场[1]，停车[2]）;
的console.log（myLatLng.toUrlValue（））;
VAR的标记=新google.maps.Marker（{
位置：myLatLng，
地图：地图，
图标：图像，
标题：停车[0]，
}）;
返回标记;
}＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体的onload =初始化（）＆GT;
＆LT; DIV ID =map_canvas的风格=宽度：100％;身高：100％＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
目前正在设置新样式的地图选项地图初始化，将无法正常工作之前...
因此，要么把setOptions线的地图= ...行之后，或者你可以在您现有的MapOptions的样式对象：
VAR的MapOptions = {
变焦：17，
款式：款式，
MINZOOM：17，
中心：罗利，
mapTypeId设为：google.maps.MapTypeId.ROADMAP
}
I used the styled maps wizard to create a styled version of my google maps, but I am not sure how to integrate the JSON into my html? Any help is appreciated. Thanks!
Here's a clip of the code.
{
"featureType": "road.highway.controlled_access",
"stylers": [
{ "color": "#808080" }
]
}
Also, here's the link to the jsfiddle.
Here's all of my current code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map_canvas {
height: 100%
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAoiYR3lgzcF8CxuOwe7SYsJAPjZQXOhQQ&sensor=false"></script>
<script type="text/javascript">
var line;
var title;
var map;
var loc;
var locations = [];
var image = new google.maps.MarkerImage('parkingIconRed.png');
var styles = [
{
"featureType": "road.highway.controlled_access",
"stylers": [
{ "color": "#808080" }
]
},{
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [
{ "color": "#80d9ff" },
{ "weight": 1.6 }
]
},{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#d2d3ff" }
]
},{
"featureType": "road.arterial",
"elementType": "labels.text.stroke",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{ "weight": 0.1 },
{ "color": "#f3f6f7" }
]
},{
"featureType": "road.highway",
"stylers": [
{ "color": "#b4b4ff" }
]
},{
"featureType": "road.highway",
"elementType": "labels.text.stroke",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{ "color": "#808080" }
]
},{
"featureType": "poi.school",
"stylers": [
{ "color": "#f1f1f1" }
]
},{
"featureType": "landscape.man_made",
"elementType": "geometry.stroke",
"stylers": [
{ "color": "#808080" },
{ "weight": 3.2 }
]
},{
"featureType": "administrative",
"stylers": [
{ "color": "#808080" }
]
},{
},{
}
]
map.setOptions({styles: styles});
function initialize() {
var raleigh = new google.maps.LatLng(35.77425, -78.639248);
var mapOptions = {
zoom : 17,
minZoom : 17,
center : raleigh,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var cityPlaza;
/*var RLINELayer = new google.maps.KmlLayer('http://caseymmiller.com/j586/MapsTest/RLINE.kml');
RLINELayer.setMap(map);*/
var plazaCoords = [
new google.maps.LatLng(35.773893, -78.63854),
new google.maps.LatLng(35.772944, -78.638594),
new google.maps.LatLng(35.772962, -78.639345),
new google.maps.LatLng(35.773884, -78.63928)
];
cityPlaza = new google.maps.Polygon({
paths : plazaCoords,
strokeColor : "#33CCFF",
strokeOpacity : 0.8,
strokeWeight : 2,
fillColor : "#33CCFF",
fillOpacity : 0.35
});
cityPlaza.setMap(map);
var parking = [
['Salisbury Deck', 35.775007, -78.640804],
['Cabarrus Deck', 35.774589, -78.640793],
['Hannover Deck', 35.774511, -78.640031],
['Convention Center Underground Deck', 35.773292, -78.639355],
['Performing Arts Deck', 35.772666, -78.641576],
['Charter Square Deck', 35.773893, -78.638551],
['Blount Street Deck', 35.776226, -78.637499],
['McDowell Street Surface Parking', 35.775303, -78.641673],
['Salisbury Parking Lot', 35.775442, -78.640814],
['Convention Center Parking Lot', 35.772553, -78.639527],
['Lenoir Street Parking Lot', 35.773231, -78.638207],
['Carrabus street Parking Lot', 35.774032, -78.63824]
];
for (var i = 0; i < parking.length; i++) {
createMarker(parking[i]);
}
var lineCoordinates = [new google.maps.LatLng(35.779742, -78.643389), new google.maps.LatLng(35.77438, -78.643733), new google.maps.LatLng(35.774259, -78.640396), new google.maps.LatLng(35.772953, -78.640482), new google.maps.LatLng(35.772866, -78.638465), new google.maps.LatLng(35.776879, -78.638315), new google.maps.LatLng(35.776766, -78.634989), new google.maps.LatLng(35.778097, -78.634883), new google.maps.LatLng(35.778202, -78.638209), new google.maps.LatLng(35.781178, -78.638059)];
var lineSymbol = {
path : google.maps.SymbolPath.CIRCLE,
scale : 8,
strokeColor : '#000'
};
line = new google.maps.Polyline({
path : lineCoordinates,
strokeColor : '#C82536',
icons : [{
icon : lineSymbol,
offset : '100%'
}],
map : map
});
animateCircle();
}
function animateCircle() {
var count = 0;
var time = offsetId = window.setInterval(function() {
count = (count + 1) % 2400;
var icons = line.get('icons');
icons[0].offset = (count / 24) + '%';
line.set('icons', icons);
}, 20);
}
function createMarker(parking) {
var myLatLng = new google.maps.LatLng(parking[1], parking[2]);
console.log(myLatLng.toUrlValue());
var marker = new google.maps.Marker({
position : myLatLng,
map : map,
icon : image,
title: parking[0],
});
return marker;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
解决方案
You are currently setting the new style map option before the map is initialized which won't work ...
So either put the setOptions line after your "map = ... " line, or you can just include the styles in your existing mapOptions object:
var mapOptions = {
zoom : 17,
styles: styles,
minZoom : 17,
center : raleigh,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
这篇关于获得JSON code从样式化地图向导整合到谷歌地图API的html？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
