在帮助下，我已经想出如何制作一个谷歌地图样式和颜色，以匹配我的客户的印刷地图。我还想出了如何用自定义标记制作地图。问题是，我似乎无法将两者结合起来。
以下是样式化地图中的代码：
<!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的请求，这是我尝试拼接这两个片段：
<!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>
答案 0 :(得分：0)
您可以将地图样式添加到mapOptions字段。
代码段
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: 'https://upload.wikimedia.org/wikipedia/commons/0/05/Green_Cross.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));
}html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
答案 1 :(得分：-1)
给出的答案仅显示3到4个结果。如果用户在那种情况下移动该地图，我需要在用户移动地图的任何地方显示结果。例如：从当前位置，用户向左移动，然后显示他们的结果：餐馆，医院等，包括他们的特定图像和名称。
那么在这种情况下我需要做什么。