您的位置：首页 > 编程语言 > Go语言
Google_Maps_API_V3离线版实现简单标注

2013-02-27 15:26 423 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.labels
{
color: white;
font-family:华文行楷;
font-size: 15px;
font-weight: bold;
text-align: left;
border: 1px solid green;
white-space: nowrap;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/mapapi.js" type="text/javascript"></script>
<script src="Scripts/mapLable.js" type="text/javascript"></script>
<script src="Scripts/infobox.js" type="text/javascript"></script>
<script type="text/javascript">

//初始化地图信息
function GMapsMapTypeFactory() { }
GMapsMapTypeFactory.createMapType = function () {
//googlemap地图图片地址
var mapTileUrl = "http://localhost:8090/maptile/googlemaps/roadmap/";
var getTileUrl = function (coord, zoom) {
var numTiles = (1 << zoom);
if ((coord.x < 0) || (coord.x >= numTiles) || (coord.y < 0) || (coord.y >= numTiles)) {
return null;
}
return resultUrl = mapTileUrl + zoom + "/" + "m_" + zoom + "_" + coord.x + "_" + coord.y + ".png";
};
var imageMapTypeOptions = {
"name": "离线",
"alt": "Show street map",
"tileSize": new google.maps.Size(256, 256),
"maxZoom": 19,
"minZoom": 5,
"getTileUrl": getTileUrl,
"isPng": true,
"opacity": 1.0
};
return new google.maps.ImageMapType(imageMapTypeOptions);
}
//声明Map
var map;
//声明markerList集合
var markerList = [];
//页面加载完后初始化功能
function initialize() {
var hWindow = document.documentElement.clientHeight;
$("#map_canvas").css("height", hWindow);

var wWindow = document.documentElement.clientWidth;
$("#map_canvas").css("width", wWindow);
//创建map
if (map == null) {
var myLatlng = new google.maps.LatLng(39.90581882361574, 116.43216133117676);
map = new google.maps.Map(document.getElementById("map_canvas"));
var gmapsMapTypeId = "localmap_roadmap";
map.mapTypes.set(gmapsMapTypeId, GMapsMapTypeFactory.createMapType());
map.streetViewControl = false;
map.scaleControl = true;
map.mapTypeControl = false;
map.mapTypeControlOptions = {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, gmapsMapTypeId]
};
map.setMapTypeId(gmapsMapTypeId);
map.setCenter(myLatlng);
map.setZoom(1);

google.maps.event.addListener(map, 'click', function (event) {
addMarkerByClick(event.latLng);
});

addMarker(39.90581882361574, 126.43216133117676);
addMarker(39.90581882361574, 100.43216133117676);
}
}
function addMarkerByClick(location) {
//            marker = new google.maps.Marker({
//                position: location,
//                map: map
//            });
}
function addMarker(y, x) {
var imageUrl = "images/police128.png";

var marker = new MarkerWithLabel({
icon: imageUrl,
position: new google.maps.LatLng(y, x),
draggable: true,
raiseOnDrag: false,
map: map,
labelContent: "部门：北京市公安局，海淀分局<br />所在地区：北京市海淀区",
labelVisible: true,
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: { opacity: 1.0, background: "#008000" }
});

var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px;font-size:12px;";
boxText.innerHTML = "部门：北京市公安局<br />所在地区：北京市海淀区";

var myOptions = {
content: boxText
, disableAutoPan: false
, maxWidth: 0
, pixelOffset: new google.maps.Size(-140, 0)
, zIndex: null
, boxStyle: {
background: "url('tipbox.gif') no-repeat"
, opacity: 0.75
, width: "230px"
}
, closeBoxMargin: "10px 2px 2px 2px"
, closeBoxURL: ""
, infoBoxClearance: new google.maps.Size(1, 1)
, isHidden: false
, pane: "floatPane"
, enableEventPropagation: false
};
var infowindow = new InfoBox(myOptions);
google.maps.event.addListener(marker, "mouseover", function (e) {
infowindow.open(map, marker);
});

google.maps.event.addListener(marker, "mouseout", function (e) {
infowindow.close();
});

markerList.push(marker);
}

function changeMarker() {
for (var i = 0; i < markerList.length; i++) {
//显示Marker的详细信息
//alert("图片路径：" + markerList[i].icon + "\r\n" + "纬度:" + markerList[i].position.lat() + "\r\n" + "经度:" + markerList[i].position.lng() + "\r\n" + "标签内容：" + markerList[i].labelContent);
//改变经纬度改变其位置
//markerList[i].setPosition(new google.maps.LatLng(38.00581882361574, 101.43216133117676));
//改变图片
markerList[i].setIcon("images/120.png");
//修改LabelContetnt
markerList[i].labelContent = "车辆定位系统。";
//清除 Marker
//markerList[i].setMap(null);
}
}
function hiddenMarker() {
for (var i = 0; i < markerList.length; i++) {
markerList[i].setVisible(false);
}
}
function showMarker() {
if (markerList) {
for (i in markerList) {
markerList[i].setVisible(true);
}
}
}
</script>
</head>
<body onload="initialize()" style="margin: 0px; overflow: hidden; width: 100%; height: 100%;">
<form runat="server" style="width: 100%; height: 100%; overflow: hidden;">
<input type="button" value="Add Marker" onclick="addMarker(39.90581882361574, 116.43216133117676);" />
<input type="button" value="Show Marker" onclick="showMarker();" />
<input type="button" value="Hidden Marker" onclick="hiddenMarker();" />
<input type="button" value="Change Marker" onclick="changeMarker();" />
<div id="map_canvas" style="width: 100%; height: 100%;">
</div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航