<!DOCTYPE html>
|
<html>
|
<head>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
<link href="mapfiles/css/default.css" rel="stylesheet" type="text/css" />
|
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
|
<!--script type="text/javascript" src="http://maps_googapis_com/maps/api/js?sensor=false"></script-->
|
<script type="text/javascript" src="mapapi3.8.6.js"></script>
|
<script type="text/javascript">
|
|
// 地图服务地址
|
var strURL = "http://192.168.11.233:8780/maptile/googlemaps/roadmap/"
|
|
function LocalMapType() {}
|
LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
|
LocalMapType.prototype.maxZoom = 17; //地图显示最大级别
|
LocalMapType.prototype.minZoom = 4; //地图显示最小级别
|
LocalMapType.prototype.name = "本地";
|
LocalMapType.prototype.alt = "显示本地地图数据";
|
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";
|
img.src = strURL + zoom + "/" + coord.x + "/" + coord.y + ".png";
|
return img;
|
};
|
|
var localMapType = new LocalMapType();
|
|
function initialize() {
|
//var myLatlng = new google.maps.LatLng(39.900827854566344, 116.38339402421877);
|
var myLatlng = new google.maps.LatLng(36.679541, 117.136001);
|
var myOptions = {
|
center: myLatlng,
|
zoom: 17,
|
streetViewControl: false,
|
mapTypeControlOptions: {
|
mapTypeIds: [
|
//google.maps.MapTypeId.ROADMAP,
|
//google.maps.MapTypeId.HYBRID,
|
//google.maps.MapTypeId.SATELLITE,
|
//google.maps.MapTypeId.TERRAIN,
|
//'locaMap' //定义地图类型
|
]
|
}
|
};
|
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
|
|
map.mapTypes.set('locaMap', localMapType); //绑定本地地图类型
|
map.setMapTypeId('locaMap'); //指定显示本地地图
|
|
//var markerOptions = new google.maps.MarkerOptions({draggable:true});
|
var marker = new google.maps.Marker({
|
position: myLatlng,
|
map: map,
|
//draggable:true,
|
title:"Hello World!"
|
});
|
|
var infowindow = new google.maps.InfoWindow({
|
content:"latlng:" + marker.getPosition().toString(),
|
size: new google.maps.Size(50,50)
|
});
|
|
google.maps.event.addListener(marker, 'click', function() {
|
infowindow.setContent("latlng:" + marker.getPosition().toUrlValue(6));
|
infowindow.open(map,marker);
|
});
|
|
}
|
</script>
|
</head>
|
<body onload="initialize()">
|
<div id="map_canvas"></div>
|
</body>
|
</html>
|
