我一直在混合标记和边界代码，以尝试以下代码中的“区域边界中的多个标记”情况。 但是，我不知道为什么每个代码都可以作为我所附的图片正常加载时无法成功加载的原因：
有些专家可以给我一些建议吗？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Complex Marker Icons</title>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map_canvas {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<div id="map_cord"></div>
<script>
// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initMap() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 15,
center: {
lat: 21.040735,
lng: 105.807015
}
});
var pVinhPhuc = [
new google.maps(lat: 21.047552, lng: 105.806087),
new google.maps(lat: 21.047313, lng: 105.808452),
new google.maps(lat: 21.045842, lng: 105.811349),
new google.maps(lat: 21.043028, lng: 105.814561),
new google.maps(lat: 21.042071, lng: 105.814305),
new google.maps(lat: 21.041575, lng: 105.814048),
new google.maps(lat: 21.041225, lng: 105.813536),
new google.maps(lat: 21.041078, lng: 105.813102),
new google.maps(lat: 21.038558, lng: 105.812649),
new google.maps(lat: 21.037970, lng: 105.813339),
new google.maps(lat: 21.037142, lng: 105.814994),
new google.maps(lat: 21.035726, lng: 105.814561),
new google.maps(lat: 21.036204, lng: 105.810600),
new google.maps(lat: 21.037823, lng: 105.810541),
new google.maps(lat: 21.037687, lng: 105.806425),
new google.maps(lat: 21.039324, lng: 105.806387),
new google.maps(lat: 21.040090, lng: 105.806201),
new google.maps(lat: 21.040337, lng: 105.806948),
new google.maps(lat: 21.040770, lng: 105.806901),
new google.maps(lat: 21.042956, lng: 105.805904),
new google.maps(lat: 21.047111, lng: 105.805951),
new google.maps(lat: 21.047587, lng: 105.806090)
];
var pVinhPhucHightlight = new google.maps.Polygon({
//DRAW THE POLYGON OR POLYLINE
paths: pVinhPhuc,
strokeColor: "#6666FF",
strokeOpacity: 0.6,
strokeWeight: 2,
fillColor: "#6666FF",
fillOpacity: 0.2
});
setMarkers(map);
}
// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
['MrTuan Apartment', 21.040735, 105.807015, 4],
['Milk 01', 21.045747, 105.807389, 5],
['Milk 02', 21.039538, 105.811123, 3],
['Milk 03', 21.038597, 105.809428, 2],
['Milk 04', 21.042943, 105.809685, 1]
];
function setMarkers(map) {
// Adds markers to the map.
// Marker sizes are expressed as a Size of X,Y where the origin of the image
// (0,0) is located in the top left of the image.
// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
var image = {
url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 32),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)
};
// Shapes define the clickable region of the icon. The type defines an HTML
// <area> element 'poly' which traces out a polygon as a series of X,Y points.
// The final coordinate closes the poly by connecting to the first coordinate.
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
var marker = new google.maps.Marker({
position: {
lat: beach[1],
lng: beach[2]
},
map: map,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
</script>
</body>
</html>