这段代码的目的是实现：鼠标在地图上点一个点，会有标记产生；再点击另一个点，产生标记同时会在两个点之间划线。再点击一个点，它会与上一个点间划线。但是现在打开网页的话没有标记，也没有点。请教大神们这是为什么
这段代码的目的是实现：鼠标在地图上点一个点，会有标记产生；再点击另一个点，产生标记同时会在两个点之间划线。再点击一个点，它会与上一个点间划线。但是现在打开网页的话没有标记，也没有点。请教大神们这是为什么
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Maps JavaScript API v3 Example: Image MapTypes</title>
<link href="mapfiles/css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mapapi.js"></script>
<script type="text/javascript" src="mapapi.js"></script>
<script>
function CoordMapType(tileSize) {
this.tileSize = tileSize;
}
CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('DIV');
var ymax = 1 << zoom;
var y = ymax - coord.y - 1;
//div.innerHTML = coord.x + "," + y + "," + zoom;
//div.style.width = this.tileSize.width + 'px';
//div.style.height = this.tileSize.height + 'px';
//div.style.fontSize = '10';
//div.style.borderStyle = 'solid';
//div.style.borderWidth = '1px';
//div.style.borderColor = '#AAAAAA';
return div;
};
function LocalMapType() {}
LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
LocalMapType.prototype.maxZoom = 18;
LocalMapType.prototype.minZoom = 1;
LocalMapType.prototype.name = "\u672C\u5730";
LocalMapType.prototype.alt = "\u663E\u793A\u672C\u5730\u5730\u56FE";
LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var img = ownerDocument.createElement("img");
img.style.width = this.tileSize.width + "px";
img.style.height = this.tileSize.height + "px";
var ymax = 1 << zoom;
var y = ymax - coord.y - 1;
var strURL = "tilemap\\" + zoom + "\\" + coord.x + "\\" + coord.y + ".png";
img.src = strURL;
return img;
};
var localMapType = new LocalMapType();
var myLatlng;
var myOptions;
var map;
var poly;
function initialize() {
myLatlng = new google.maps.LatLng(34.251345, 108.946673);
myOptions = {
center: myLatlng,
zoom: 16,
streetViewControl: false,
//\u6BD4\u4F8B\u5C3A\u63A7\u4EF6
scaleControl: true,
mapTypeControlOptions: {
mapTypeIds: ["local", google.maps.MapTypeId.ROADMAP]
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
//map.setMapTypeId('satellite');
//map.MapTypes.insertAt(0, moonMapType);
map.mapTypes.set('local', localMapType);
map.setMapTypeId('local');
google.maps.event.addListener(map, 'mouseover', function(event){
var lat = event.latLng.lat();//纬度
var lng =event.latLng.lng();//经度
});
map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
poly = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
});
poly.setMap(map);
// Add a listener for the click event
map.addListener('click', addLatLng);
}
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear.
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
</script>
</head>
<body onload="initialize()">
<!--<div id="map_canvas" style="width: 100%; height: 690px;"></div>-->
<div id="map_canvas" style="width: 100%; height: 690px;"></div>
</body>
</html>
