需要帮助修复我的JS，因为没有显示自定义地图标记。 它给了我下一个错误 { ＆＃34;消息＆＃34;：＆＃34;未捕获的ReferenceError：地图未定义＆＃34;， ＆＃34; filename＆＃34;：＆＃34; http://stacksnippets.net/js＆＃34;， ＆＃34; lineno＆＃34;：77， ＆＃34; colno＆＃34;：14 }
我使用了Google文档，但没有解决问题，也许是因为我为地图添加了一个样式数组？
html, body, #myMap{
height:100%;
width: 100%;
margin: 0;
padding: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD11wffq7WZNtYAPTRJ-0x9cEzCTn8IkWw&signed_in=true"></script>
<script>
var styleArray;
var mapOptions;
var marker;
var myMap;
function init() {
var styleArray = [
{
featureType: 'all',
stylers: [
{ saturation: -95 }
]
},{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [
{ color: '#ffffff' },
{ lightness: 100 },
{ visibility: 'simplified' }
]
},{
featureType: 'poi.business',
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
}
];
var mapOptions = {
zoom: 1,
center: new google.maps.LatLng(-45.363, 131.044),
disableDefaultUI: true,
styles: styleArray
};
var myMap = new google.maps.Map(document.getElementById('myMap'), mapOptions);
var custom = {
path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
fillColor: '#4f4f4f',
fillOpacity: .9,
scale: 1,
strokeColor: '#4f4f4f',
strokeWeight: 1,
};
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: custom,
map: myMap,
draggable: true,
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="myMap"></div>
</body>
</html>
答案 0 :(得分：1)
变量map在此行中不存在（如错误消息所示）：
position: map.getCenter(),
您的代码会调用google.maps.Map对象myMap。那应该是position: myMap.getCenter(),
修正代码段
html,
body,
#myMap {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD11wffq7WZNtYAPTRJ-0x9cEzCTn8IkWw"></script>
<script>
var styleArray;
var mapOptions;
var marker;
var myMap;
function init() {
var styleArray = [{
featureType: 'all',
stylers: [{
saturation: -95
}]
}, {
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [{
color: '#ffffff'
}, {
lightness: 100
}, {
visibility: 'simplified'
}]
}, {
featureType: 'poi.business',
elementType: 'labels',
stylers: [{
visibility: 'off'
}]
}];
var mapOptions = {
zoom: 1,
center: new google.maps.LatLng(-45.363, 131.044),
disableDefaultUI: true,
styles: styleArray
};
var myMap = new google.maps.Map(document.getElementById('myMap'), mapOptions);
var custom = {
path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
fillColor: '#4f4f4f',
fillOpacity: .9,
scale: 1,
strokeColor: '#4f4f4f',
strokeWeight: 1,
};
var marker = new google.maps.Marker({
position: myMap.getCenter(),
icon: custom,
map: myMap,
draggable: true,
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="myMap"></div>
</body>
</html>