【发布时间】：2015-08-12 10:02:35
【问题描述】：
在帮助下，我想出了如何制作与我客户的打印地图相匹配的样式和颜色的谷歌地图。我还想出了如何使用自定义标记制作地图。问题是，我似乎无法将两者结合起来。
这是样式地图中的代码：
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 950px;
height: 525px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(45.510000, -122.630930),
zoom: 14,
MapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
featureType: 'parks',
elementType: 'geometry',
stylers: [
{ color: "#8dc858" }
]
}, {
featureType: 'road',
elementType: 'geometry',
stylers: [
{ color: '#FFFFFF' },
{ weight: 0.6 }
]
}, {
featureType: 'landscape',
elementType: 'geometry',
stylers: [
{ color: "#d7dfbd" }
]
}, {
featureType: 'water',
elementType: 'geometry',
stylers: [
{ color: "#647ca1" }
]
},{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [
{ color: "#696969" }
]
}
]
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
这是带有自定义标记的地图的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>GoogleMapHawthorne It Works!</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 950px; height: 525px;"></div>
<script type="text/javascript">
var locations = [
['Hawthorne Chiropractic and Healing Arts', 45.504718, -122.653155, 4],
['Hawthorne Wellness', 45.511934, -122.622045, 5],
['Mint Dental Works', 45.517792, -122.651134, 3],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(45.510000, -122.630930),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: {
url: '.../GreenCross.png',
scaledSize: new google.maps.Size(25, 25)
}
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
我尝试将“样式器”粘贴到地图中，并在 mapTypeId: google.maps.MapTypeId.ROADMAP 下方带有标记，但这只是给了我一张空白地图。
关于如何结合这些有什么建议吗？我已经搜索了几个线程，但似乎没有人有完全相同的问题。如果有人知道类似的问题已经在研究中，请随时指出我。
编辑：应用户 geocodezip 的要求，这是我将这两个 sn-ps 拼接在一起的尝试：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>GoogleMapHawthorne It Works!</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 950px; height: 525px;"></div>
<script type="text/javascript">
var locations = [
['Hawthorne Chiropractic and Healing Arts', 45.504718, -122.653155, 4],
['Hawthorne Wellness', 45.511934, -122.622045, 5],
['Mint Dental Works', 45.517792, -122.651134, 3],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(45.510000, -122.630930),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
featureType: 'parks',
elementType: 'geometry',
stylers: [
{ color: "#8dc858" }
]
}, {
featureType: 'road',
elementType: 'geometry',
stylers: [
{ color: '#FFFFFF' },
{ weight: 0.6 }
]
}, {
featureType: 'landscape',
elementType: 'geometry',
stylers: [
{ color: "#d7dfbd" }
]
}, {
featureType: 'water',
elementType: 'geometry',
stylers: [
{ color: "#647ca1" }
]
},{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [
{ color: "#696969" }
]
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: {
url: 'file:///Volumes/GIS_FLASHDR/Indie%20Carto%20Projects/Hawthorne/GreenCross.png',
scaledSize: new google.maps.Size(25, 25)
}
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
【问题讨论】：
-
非工作代码是什么样的（您尝试添加样式但没有工作）？
-
不幸的是这里没有足够的空间来粘贴代码。我有点怀疑它是否值得在 github 上发布。无论如何，看起来我只是少了一个或两个括号。
-
请不要尝试在 cmets 中发布代码（它们真的很难阅读），通过使用请求的信息编辑您的问题来解决 cmets。
-
按要求将无效代码粘贴到原始问题中。
标签： javascript html google-maps google-maps-api-3