<!DOCTYPE html>
<html DIR="LTR">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var poly;
var map;
var ploy;
var geocoder;
var cd=new Array();
var infowindow = new google.maps.InfoWindow();//初始化信息框对象
function initialize() {
//创建地址解析器
geocoder = new google.maps.Geocoder();
//初始化坐标
var myLatlng = new google.maps.LatLng(34.2666666666667,108.5);
//初始化Options对象
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//初始化地图
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
//DrawLine();//定点划线
//地图单击事件
google.maps.event.addListener(map, 'click', function(event) {
//创一个新的标记
NewMarker(event.latLng);
var vhcCode1 = new LableMarker(map,"陕A"+Math.round(Math.random() *100000)+1,event.latLng);
//当标记大于三个时自动画多边形区域
if(cd!=null && cd!=undefined && cd.length>=3){
//创建画图对象
ploy=new google.maps.Polygon({
paths:cd,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor:"#FF0000",
fillOpacity: 0.35
});
//设置地图
ploy.setMap(map);
}
});
//创建划线对象
poly = new google.maps.Polyline(polyOptions);
//设置地图
poly.setMap(map);
}
function LableMarker(map, text, latLng){
this.map_ = map;
this.text_ = '<div class="iconTheStyle" style="background:#F9F900; font-size:14px; color:#000000; font-weight:bold; white-space:nowrap; border:1px solid #666666;">'+text+'</div>';
this.latLng_ = latLng;
this.div_ = null;
this.setMap(map);
}
// 继承自 google.maps.OverlayView
LableMarker.prototype = new google.maps.OverlayView();
// 当准备将 悬浮层 添加到地图上时 调用
LableMarker.prototype.onAdd = function(){
var div = document.createElement('DIV');
div.style.border = 'none';
div.style.position='absolute';
div.innerHTML = this.text_;
this.div_ = div;
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
// 当第一次在地图上显示时 调用
LableMarker.prototype.draw = function(){
var overlayProjection = this.getProjection();
var latLng = overlayProjection.fromLatLngToDivPixel(this.latLng_);
// 设置层的大小 和 位置
var div = this.div_;
var size = new google.maps.Size(10, -25); // 修正坐标的值;
div.style.left = (latLng.x + size.width) + 'px';
div.style.top = (latLng.y + size.height) + 'px';
};
// 当设置 悬浮层的 setMap(null) 会自动调用
LableMarker.prototype.onRemove = function(){
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
//创建一个新的标记
function NewMarker(location) {
//创建Image
var image = 'images//gq.png';
//获得路径
var path = poly.getPath();
//添加坐标
path.push(location);
//往数组添加坐标
cd.push(location);
//创建坐标对象
var clickedLocation = new google.maps.LatLng(location);
//创建标记对象
var marker = new google.maps.Marker({
position: location,
map:map,
draggable:true,
animation: google.maps.Animation.BOUNCE,
title: 'Hello World!!!' + path.getLength(),
icon: image
});
//标记鼠标移入事件
google.maps.event.addListener(marker,'mouseover',function(event){
//创建信息弹框
//var infowindow = new google.maps.InfoWindow({
//content: "欢迎"
//});
codeLatLng(event.latLng,marker);
//打车牌号码
//var vhcCode1 = new LableMarker(map,"陕A"+Math.round(Math.random() *100000)+1,event.latLng);
//打开信息弹框
//infowindow.open(map,marker);
});
//标记鼠标移出事件
google.maps.event.addListener(marker,'mouseover',function(){
infowindow.close();
});
//标记鼠标移入事件
google.maps.event.addListener(marker,'click',function(event){
//创建信息弹框
//var infowindow = new google.maps.InfoWindow({
//content: "欢迎"
//});
codeLatLng(event.latLng,marker);
//打开信息弹框
//infowindow.open(map,marker);
});
//初始化坐标位置
map.setCenter(location);
}
//定点坐标划线
function DrawLine(){
//画线
var line = [
new google.maps.LatLng(34.96571,106.39885),
new google.maps.LatLng(40.96571,105.39885)
];
var flightPath = new google.maps.Polyline({
path: line,
strokeColor: "blue",
strokeOpacity: 1.0,
strokeWeight: 5
});
flightPath.setMap(map);
}
//反向解析
function codeLatLng(location,marker) {
geocoder.geocode({'latLng': location}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
infowindow.setContent("当前地址:"+results[1].formatted_address);
infowindow.open(map, marker);
} else {
alert("没有找到可解析对象");
}
} else {
alert("无法解析对象: " + status);
}
});
}
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas"></div>
</body>
</html>
MapDemo.zip （2个子文件） 
MapDemo images 
gq.PNG 719B
test.html 6KB资源评论
............02018-02-24还行，挺实用的- axing9252013-05-07还行，挺实用的
lca_smile
- 粉丝: 0
- 资源: 20
