google api 3

时间：2016-05-12 16:27:50 阅读：525 评论：0 收藏：0 [点我收藏+]

标签：

google map api v3 帮助文档：https://developers.google.com/maps/documentation/javascript/reference?hl=zh-CN#MouseEvent

<!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="mapapi3.8.6.js"></script>
<script type="text/javascript">
var map=null;
function CoordMapType(tileSize) {
this.tileSize = tileSize;
}
CoordMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
//卫星地图地名存放路径
var strURL = "maptile/googlemaps/overlay/";
strURL += zoom + "/" + coord.x + "/" + coord.y + ".png";
var imgstr = "<img src=‘" + strURL + "‘ />";

var div = ownerDocument.createElement(‘DIV‘);
div.style.width = this.tileSize.width + "px";
div.style.height = this.tileSize.height + "px";
div.innerHTML = imgstr;
return div;

/* var div = ownerDocument.createElement(‘DIV‘);
var ymax = 1 << zoom;
//var y = ymax - coord.y - 1;
var y =coord.y;
var x=coord.x;
zoom=zoom+1;
div.innerHTML = "x="+x + ",y=" + y + ",zoom=" + zoom;
div.style.width = this.tileSize.width + ‘px‘;
div.style.height = this.tileSize.height + ‘px‘;
div.style.fontSize = ‘20‘;
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 = 10; //地图显示最大级别
LocalMapType.prototype.minZoom = 1; //地图显示最小级别
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";
//卫星地图地图存放路径
var strURL = "maptile/googlemaps/Hybrid/";
strURL += zoom + "/" + coord.x + "/" + coord.y + ".jpg";
img.src = strURL;
return img;
};

var localMapType = new LocalMapType();

//普通地图类型
var localCommonMapType=new LocalCommonMapType();
function LocalCommonMapType() { }
LocalCommonMapType.prototype.tileSize = new google.maps.Size(256, 256);
LocalCommonMapType.prototype.maxZoom = 10; //地图显示最大级别
LocalCommonMapType.prototype.minZoom = 1; //地图显示最小级别
LocalCommonMapType.prototype.name = "本地普通地图";
LocalCommonMapType.prototype.alt = "显示本地地图数据";
LocalCommonMapType.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 strURL = "maptile/googlemaps/roadmap/";
strURL += zoom + "/" + coord.x + "/" + coord.y + ".png";
img.src = strURL;
return img;
};

function initialize() {
var myLatlng = new google.maps.LatLng(22.900827854566344, 114.38339402421877);
var myOptions = {
center: myLatlng,
zoom: 9,
streetViewControl: false,
mapTypeControlOptions: {
mapTypeIds: [ //google.maps.MapTypeId.ROADMAP,//google.maps.MapTypeId.SATELLITE,//google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.HYBRID,
‘locaMap‘,
‘locaCommonMap‘] //定义地图类型
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

map.mapTypes.set(‘locaMap‘, localMapType); //绑定本地地图类型
map.setMapTypeId(‘locaMap‘); //指定显示本地地图

map.mapTypes.set(‘locaCommonMap‘, localCommonMapType); //绑定本地普通地图类型
map.setMapTypeId(‘locaCommonMap‘); //指定显示本地普通地图

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);
document.getElementById("div22").style.display=‘block‘;
});

//map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));

//MapTypeId类型发现变化时发生
google.maps.event.addListener(map, ‘maptypeid_changed‘, function () {
if (map.getMapTypeId() == ‘locaMap‘) {
// marker1.setVisible(false);
//插入卫星本地地图地名
map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
}
else {

map.overlayMapTypes.clear();
}
});
}
//画线
function GLatLng_Test()
{
var bounds = map.getBounds();
var southWest = bounds.getSouthWest(); // 返回矩形西南角的點
var northEast = bounds.getNorthEast(); // 返回矩形東北角的點
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var points = [];
// 亂數取點
for (var i = 0; i < 10; i++){
var point = new google.maps.LatLng(
southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
// alert(point);
points.push(point);
var marker = new google.maps.Marker({
position: point,
map: map,
draggable: true,
title: "Hello World!"
});
}

// 排序
points.sort(function(p1, p2) { return p1.lng() - p2.lng();});
// 画线
var polylineOptions = {
path: points,
strokeColor: "#ff000",
strokeWeight: 2
};
var polyline = new google.maps.Polyline(polylineOptions);
polyline.setMap(map);

google.maps.event.addListener(map, ‘click‘, function(e)
{
var path = polyline.getPath();
path.push(e.latLng);
});
}

//中国
var AllPoints = []; //
function draw(){
var polylineOptions = {
path: AllPoints,
strokeColor: "#ff000",
strokeWeight: 2
};
var polyline = new google.maps.Polyline(polylineOptions);
polyline.setMap(map);
google.maps.event.addListener(map, ‘click‘, function(e)
{
var path = polyline.getPath();
path.push(e.latLng);

AllPoints.push(e.latLng);
});
}

function savePoints()
{
document.getElementById("points").value=AllPoints;
alert(AllPoints);
}

//鼠标移上去显示坐标
function ShowPoint()
{
google.maps.event.addListener(map, ‘mousemove‘, function(e)
{
document.getElementById("div_Point").innerHTML=e.latLng;
document.getElementById("points").value=e.latLng;
});
}

//中国
var chinaPoints="49.06733921468351, 87.47305128828122,49.06733921468351, 87.93447706953122,48.8653883031627, 87.95644972578122,48.67712977928795, 88.04434035078122,48.50272591420413, 88.17617628828122,48.41529819582006, 88.28603956953122,48.298493630601015, 88.46182081953122,48.06408079778488, 88.85732863203122,48.020009030484545, 89.16494581953122,47.99060690359105, 89.60439894453122,47.784322606049166, 89.86807081953122,47.79908444834607, 90.13174269453122,47.57721642106414, 90.41738722578122,47.45850080261282, 90.43935988203122,47.27992362228915, 90.50527785078122,47.08578252449935, 90.68105910078122,46.90594506116701, 90.76894972578122,46.80076033293104, 90.98867628828122,46.65013900919116, 91.18643019453122,46.438562485428775, 91.09853956953122,46.271745220373305, 90.96670363203122,46.16532361750529, 90.96670363203122,46.012934923078454, 90.96670363203122,45.79888335980031, 90.92275831953122,45.61475359616775, 90.87881300703122,45.41459519745672, 90.83486769453122,45.27560694048708, 90.87881300703122,45.22920168823629, 91.34023878828122,45.058724687344444, 91.45010206953122,44.99660665541432, 91.86758253828122,44.98106661442438, 92.65859816328122,44.96552236023138, 93.25185988203122,44.747460418667096, 93.77920363203122,44.591196322853676, 94.32852003828122,44.38742319552091, 94.59219191328122,44.261670513936274, 94.87783644453122,44.230190224354146, 95.25137160078122,44.21444376200791, 95.47109816328122,43.898630167929824, 95.42715285078122,43.676558616047316, 95.75674269453122,43.22994112578432, 95.93252394453122,42.98932540860856, 96.17422316328122,42.76389755818704, 96.43789503828122,42.715484463831125, 96.74551222578122,42.68318806820842, 97.22891066328122,42.65087487485234, 97.80019972578122,42.61854488530914, 98.19570753828122,42.537646438480664, 99.00869581953122,42.5214541553532, 99.44814894453122,42.61854488530914, 100.12930128828122,42.57001841158074, 100.48086378828122,42.61854488530914, 100.81045363203122,42.602373592456665, 101.22793410078122,42.5214541553532, 101.51357863203122,42.47285212212672, 101.64541456953122,42.42421231751441, 101.88711378828122,42.27806633319379, 102.06289503828122,42.21300350351749, 102.19473097578122,42.180446928064, 102.37051222578122,42.11528346528195, 102.52432081953122,42.08267658176358, 102.87588331953122,41.93573816131168, 103.27139113203122,41.870323268477286, 103.79873488203122,41.78846042249477, 104.39199660078122,41.607993775071186, 104.65566847578122,41.62442075808287, 105.16103956953122,41.83759069249559, 105.68838331953122,42.01741252016768, 106.28164503828122,42.24554330584359, 106.91885206953122,42.343062055685465, 107.55605910078122,42.32681941715133, 108.23721144453122,42.343062055685465, 108.94033644453122,42.407990656655514, 109.46768019453122,42.602373592456665, 109.95107863203122,42.957171853029045, 110.76406691328122,43.18189365904127, 110.91787550703122,43.30993613183771, 111.26943800703122,43.5174310186934, 111.51113722578122,43.676558616047316, 111.86269972578122,43.91446084901314, 111.95059035078122,44.11987654619932, 111.70889113203122,44.308859359629295, 111.53310988203122,44.71624130307598, 111.75283644453122,45.0432014991632, 112.01650831953122,44.90330321149018, 112.80752394453122,44.82543447911919, 113.07119581953122,44.76306365691269, 113.53262160078122,44.85659461153072, 113.75234816328122,45.105268972739964, 114.36758253828122,45.105268972739985, 115.33437941328122,45.229201688236316, 116.12539503828122,45.78356237785543, 117.00430128828122,46.21095813232425, 117.00430128828122,46.63505374477991, 117.44375441328122,46.63505374477991, 118.85000441328122,46.63505374477991, 119.81680128828122,47.17547432914554, 119.64102003828122,47.592036988587516, 118.85000441328122,47.592036988587516, 117.70742628828122,47.710450490571, 116.65273878828122,48.005310062058776, 116.03750441328122,48.59000308967489, 116.12539503828122,49.168008065282876, 116.12539503828122,49.62560889698164, 116.65273878828122,49.62560889698164, 117.79531691328122,49.73934334008529, 118.76211378828122,50.13532060732946, 118.85000441328122,50.472142505284125, 119.28945753828122,51.083465052432935, 119.64102003828122,51.52305314244881, 120.25625441328122,51.904244520976555, 120.34414503828122,52.389635926490364, 120.34414503828122,52.816661993400075, 120.16836378828122,52.9757247165993, 120.87148878828122,53.23953340547902, 122.36562941328122,53.08144239760423, 124.82656691328122,52.816661993400075, 125.44180128828122,51.958438339377125, 126.76016066328122,51.24880404832947, 126.76016066328122,50.583886727232105, 127.02383253828122,49.96601451446712, 127.46328566328122,49.340108066164674, 129.39687941328123,48.93760752291284, 130.18789503828123,48.064080797784904, 131.24258253828123,47.710450490571, 131.68203566328123,47.651277300959855, 132.82461378828123,48.064080797784904, 134.40664503828123,48.18142120604114, 135.37344191328123,47.53272954071508, 134.58242628828123,46.81579933620121, 134.31875441328123,45.78356237785543, 133.79141066328123,44.91886431846165, 133.00039503828123,44.98106661442438, 132.12148878828123,44.79425749420596, 131.41836378828123,44.104100603904904, 131.41836378828123,42.957171853029074, 131.41836378828123,42.3755347472427, 130.36367628828123,42.63471197950662, 129.74844191328123,42.31057258374225, 129.48477003828123,41.72289478250135, 128.51797316328123,41.0635580568182, 127.19961378828122,40.598048061453824, 126.14492628828122,40.196441171490285, 125.61758253828122,39.38605515714008, 123.59609816328122,39.65724431033656, 123.06875441328122,39.38605515714008, 122.01406691328122,40.06204020748552, 121.66250441328122,40.33057627264389, 121.57461378828122,40.06204020748552, 120.87148878828122,39.58954631068479, 119.99258253828122,38.84050510984894, 118.93789503828122,38.66915551460319, 118.12490675703122,38.42857560356866, 117.94912550703122,38.04889735908968, 118.16885206953122,37.94500493531614, 118.82803175703122,37.31856612130946, 119.17959425703122,37.14361960488816, 119.44326613203122,37.24863622821147, 119.83877394453122,37.5279656129266, 120.23428175703122,37.667239689324866, 120.80557081953122,37.63244561283795, 121.42080519453122,37.4582308568148, 122.12393019453122,37.24863622821147, 122.69521925703122,36.86286187586225, 122.38760206953122,36.54577200896442, 121.72842238203122,36.19191833892145, 121.20107863203122,35.62241418517274, 120.54189894453122,35.33612845801641, 120.14639113203122,35.120746046090105, 119.97060988203122,34.688269846618496, 119.66299269453122,34.32613748776454, 120.36611769453122,33.633768217065025, 120.84951613203122,33.00952210089373, 121.11318800703122,32.1950751209298, 121.86025831953122,31.37327328802846, 122.43154738203122,30.31687158054076, 122.60732863203122,29.095471755325736, 122.21182081953122,28.595067498132, 121.94814894453122,27.781677501179686, 121.46475050703122,27.196925064256458, 120.84951613203122,26.491156835007658, 120.27822706953122,25.58300877827076, 119.75088331953122,24.74776114481278, 119.17959425703122,23.665588507125232, 118.08096144453122,22.777125540412488, 116.63076613203122,22.45259508446922, 114.91689894453122,22.086588645583322, 113.86221144453122,21.597102574658212, 113.11514113203122,21.31080001052665, 112.19228956953122,20.900827854566376, 111.66494581953122,20.407380092644722, 111.04971144453122,19.49862932737268, 110.82998488203122,18.584746175553416, 110.17080519453122,18.33464134809256, 109.16006300703122,19.125376893126056, 108.76455519453122,19.622856596318364, 109.42373488203122,20.201306902055293, 109.68740675703122,20.530891971060793, 109.46768019453122,20.777616342634086, 108.32510206953122,19.8710227556576, 106.78701613203122,19.332844584851226, 106.34756300703122,18.37635076163955, 106.12783644453122,17.749661791611014, 107.13857863203122,16.868613440893558, 107.27041456953122,16.067912837641206, 108.36904738203122,15.13675271004618, 108.98428175703122,14.073638100061597, 109.24795363203122,13.219552695625235, 109.20400831953122,12.190704593844815, 109.24795363203122,11.200961244656266, 108.89639113203122,10.33754334498816, 108.28115675703122,9.86163689453373, 106.91885206953122,9.168189530463816, 104.98525831953122,10.207820743772121, 104.37002394453122,10.726387273321941, 102.91982863203122,11.760817058234447, 102.21670363203122,12.49121330467528, 101.33779738203122,13.005555359319588, 100.85439894453122,17.707803491672873, 105.16103956953122,18.70966139602313, 101.29385206953122,20.036251621439174, 98.12978956953122,22.493203208048982, 96.89932081953122,24.428077563458757, 97.77822706953122,26.176077863940335, 97.42666456953122,25.86014490501643, 94.96572706953122,24.74776114481278, 93.03213331953122,26.333724550467003, 91.09853956953122,26.491156835007658, 88.81338331953122,26.491156835007658, 86.35244581953122,27.742790814024442, 84.59463331953122,29.287291898916617, 82.48525831953122,30.657696336287756, 78.79385206953122,32.60322420687776, 76.50869581953122,34.217191348081016, 75.10244581953122,36.36904634493924, 74.39932081953122,37.77152407561673, 73.87197706953122,38.87472565188057, 74.22353956953122,40.229999879644595, 75.45400831953122,41.9520814123526, 78.09072706953122,43.37385643181341, 79.49697706953122,43.50149511541475, 81.07900831953122,45.13627743044849, 81.07900831953122,46.72550224058188, 82.83682081953122,47.44364246264987, 84.41885206953122,48.502725914204156, 87.05557081953122,48.3861221593706, 87.75869581953122";

function china()
{
var chinaPointsArray=chinaPoints.split(",");
var points=[];
for (var i = 0; i < chinaPointsArray.length; i++){
var point = new google.maps.LatLng(chinaPointsArray[i],chinaPointsArray[i+1]);
i=i+1;
points.push(point);
}
// 画线
var polylineOptions = {
path: points,
strokeColor: "#ff000",
strokeWeight: 2
};
var polyline = new google.maps.Polyline(polylineOptions);
polyline.setMap(map);

var myLatlng = new google.maps.LatLng(40.3861221593706, 116.75869581953122);
map.setCenter(myLatlng);
map.setZoom(4);
}

</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas">
</div>
<div>

<input type="text" id="points" />
<input type="button" value="画线测试" onClick="GLatLng_Test()"/>
<input type="button" value="画线" onClick="draw()"/>
<input type="button" value="保存区域" onClick="savePoints()"/>
<input type="button" value="中国" onClick="china()"/>
<input type="button" value="鼠标移上去显示坐标" onClick="ShowPoint()"/>
</div>
<div id="div_Point" style=" position:absolute; left:0px; top:0px; bottom:0px; height:50px; background-color:#FF0000;">

</div>
</body>
</html>

google api 3

标签：

原文地址：http://blog.csdn.net/xiaobai_2511/article/details/51363917

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行