Google Map API V3开发（6） 代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Google Maps API V3 Demo</title>
<script type="text/javascript" src='http://maps.googleapis.com/maps/api/js?v=3&sensor=true&language=hk'></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry,places,weather&sensor=true"></script>
<script type="text/javascript">
var map;
var autocomplete;
var styles = [];
var directionsDisplay;
var elevator;
function initialize() {
var myOptions = {
zoom: 13,
center: new google.maps.LatLng(22.1623, 113.5552),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
styles = map.styles;
var input = document.getElementById('wordSearch');
var options = {
//types: ['bank'],
};
autocomplete = new google.maps.places.Autocomplete(input, options);
//高程
elevator = new google.maps.ElevationService();
google.maps.event.addListener(map, 'click', getElevation);
}
function AddMarker() {
var myPoint = new google.maps.LatLng(22.1623, 113.5552);
createMarker(myPoint, "I'm a marker.", 0)
var contentString = "<div><div style='font-size:18px;font-weight:bold'><a href='' target='_blank'>Macau Galaxy</a></div><div></div><div>I'm a marker.</div><img src='Images/back.jpg'/></div>";
myPoint = new google.maps.LatLng(22.148392, 113.554451);
createMarker(myPoint, contentString, 1)
}
//在地图上描点
function createMarker(point, html, index) {
var letter = String.fromCharCode("A".charCodeAt(0) + index);
var icon = "http://ditu.google.com/mapfiles/marker" + letter + ".png";
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
var marker = new google.maps.Marker({
position: point,
map: map,
icon: icon,
shape: shape,
title: "",
zIndex: index
});
if (index = 0) {
setClickEvent(map, marker, html, index);
}
else {
setClickEvent2(map, marker, html, index);
}
markersArray.push(marker);
}
var lastinfowindow = null;
var markersArray = [];
function setClickEvent2(map, marker, html, index) {
var infowindow = new google.maps.InfoWindow({
content: html,
maxWidth: 500,
zIndex: index
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
if (lastinfowindow && lastinfowindow != infowindow) {
lastinfowindow.close();
}
lastinfowindow = infowindow;
});
}
function setClickEvent(map, marker, html, index) {
var infowindow = new google.maps.InfoWindow({
content: "<div>" + html + "</div>",
maxWidth: 160,
zIndex: index
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
if (lastinfowindow && lastinfowindow != infowindow) {
lastinfowindow.close();
}
lastinfowindow = infowindow;
});
}
function MoveMarker() {
markersArray[0].setPosition(new google.maps.LatLng(22.1633, 113.5642));
markersArray[1].setPosition(new google.maps.LatLng(22.149392, 113.556451));
}
function HideMarker() {
var btn = document.getElementById("HideMarker");
if (btn.value == "隐藏 Marker") {
btn.value = "显示 Marker";
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
}
else if (btn.value == "显示 Marker") {
btn.value = "隐藏 Marker";
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(map);
}
}
}
function RemoveMarker() {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
function checkIfPanMap(point) {
if (map.getBounds().contains(point)) {
}
else {
map.panTo(point);
}
}
function showLocation() {
var addressInput = document.getElementById('address').value;
if (addressInput != "") {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: addressInput,
bounds: new google.maps.LatLngBounds(new google.maps.LatLng(22.10, 113.52), new google.maps.LatLng(22.22, 113.62)),
//region: "MO/MAC"
}, function geoResults(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
RemoveMarker();
var lat, lng, point, marker;
for (var i = 0; i < results.length; i++) {
if (i < 26) { //26个字母，找到26个即可
point = results[i].geometry.location;
if (i == 0) {
checkIfPanMap(point);
}
createMarker(point, results[i].formatted_address, i);
}
}
}
else {
alert("Can not find the Address " + addressInput + ":" + status);
}
})
}
else {
alert("Please enter the Address to Search!");
}
}
function getLocation(){
var point = map.getCenter();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({location:point},function geoResults(results, status){
//这里处理结果和上面一模一样
if (status == google.maps.GeocoderStatus.OK) {
var addressName = results[0].formatted_address;
if (addressName == "") {
alert("Can not locate the Address!");
}
else {
var address = document.getElementById('getAddress');
address.value = addressName;
}
}
else{
alert("Can not locate the Address:" + status);
}
});
}
function CreatePolyline(){
var pathCoordinates = [
new google.maps.LatLng(22.143561, 113.552596),
new google.maps.LatLng(22.142318, 113.5523),
new google.maps.LatLng(22.142336, 113.552181),
new google.maps.LatLng(22.15008, 113.550756)
];
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var flightPath = new google.maps.Polyline({
path: pathCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
icons: [{
icon: lineSymbol,
offset: '100%'
}],
strokeWeight: 2,
//editable: true
});
flightPath.setMap(map);
}
function CreatePolygon(){
var PolygonCoords = [
new google.maps.LatLng(22.181864, 113.540058),
new google.maps.LatLng(22.180997, 113.538578),
new google.maps.LatLng(22.18073, 113.536852),
new google.maps.LatLng(22.186214, 113.537424)
];
// Construct the polygon
// Note that we don't specify an array or arrays, but instead just
// a simple array of LatLngs in the paths property
Polygon = new google.maps.Polygon({
paths: PolygonCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
Polygon.setMap(map);
}
function CreateCircle(){
var CircleOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(22.1623, 113.5552),
radius: 500
};
Circle = new google.maps.Circle(CircleOptions);
}
function wordSearch(){
var request = {
location: map.getCenter(),
radius: '5000',
query: document.getElementById('wordSearch').value
};
var service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}
function addressSearch(){
var address = map.getCenter();
var request = {
location: address,
radius: '2000',
types: [document.getElementById('addressSearch').value]
};
var service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}
function callback(results, status) {
//alert(status);
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(place.geometry.location, place.name, i);
}
}
}
function calDis(){
//from 澳门大学 to 澳门银河
var dis = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(22.1623, 113.5552), new google.maps.LatLng(22.148392, 113.554451));
document.getElementById('distance').value = dis;
}
function calLen(){
var pathCoordinates = [
new google.maps.LatLng(22.143561, 113.552596),
new google.maps.LatLng(22.142318, 113.5523),
new google.maps.LatLng(22.142336, 113.552181),
new google.maps.LatLng(22.15008, 113.550756)
];
var len = google.maps.geometry.spherical.computeLength(pathCoordinates);
document.getElementById('distance').value = len;
}
function calArea(){
var PolygonCoords = [
new google.maps.LatLng(22.181864, 113.540058),
new google.maps.LatLng(22.180997, 113.538578),
new google.maps.LatLng(22.18073, 113.536852),
new google.maps.LatLng(22.186214, 113.537424)
];
var area = google.maps.geometry.spherical.computeArea(PolygonCoords);
document.getElementById('distance').value = area;
}
function setStyles(){
var newstyle = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map.setOptions({styles: newstyle});
}
function restoreStyles(){
map.setOptions({styles: styles});
}
var weatherLayer;
var cloudLayer;
function addLayer(){
weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS //FAHRENHEIT 华氏
});
weatherLayer.setMap(map);
cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
}
function removeLayer(){
weatherLayer.setMap(null);
weatherLayer = null;
cloudLayer.setMap(null);
cloudLayer = null;
}
function calcRoute() {
var selectedMode = document.getElementById("mode").value;
var university = new google.maps.LatLng(22.1623, 113.5552);
var galaxy = new google.maps.LatLng(22.148392, 113.554451);
var request = {
origin: university,
destination: galaxy,
// Note that Javascript allows us to access the constant
// using square brackets and a string value as its
// "property."
travelMode: google.maps.TravelMode[selectedMode]
};
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function getElevation(event) {
var locations = [];
// Retrieve the clicked location and push it on the array
var clickedLocation = event.latLng;
locations.push(clickedLocation);
// Create a LocationElevationRequest object using the array's one value
var positionalRequest = {
'locations': locations
}
// Initiate the location request
elevator.getElevationForLocations(positionalRequest, function(results, status) {
if (status == google.maps.ElevationStatus.OK) {
// Retrieve the first result
if (results[0]) {
// Open an info window indicating the elevation at the clicked position
var infowindow = new google.maps.InfoWindow();
infowindow.setContent('高程: ' + results[0].elevation + ' 米');
infowindow.setPosition(clickedLocation);
infowindow.open(map);
} else {
alert('No results found');
}
} else {
alert('Elevation service failed due to: ' + status);
}
});
}
</script>
</head>
<body onload="initialize()">
<input type="button" value = "添加 Marker" style="width:100px;height:33px;vertical-align:middle;" onclick="AddMarker()"/>
<input type="button" value = "移动 Marker" style="width:100px;height:33px;vertical-align:middle;" onclick="MoveMarker()"/>
<input type="button" id = "HideMarker" value = "隐藏 Marker" style="width:100px;height:33px;vertical-align:middle;" onclick="HideMarker()"/>
<input type="button" value = "删除 Marker" style="width:100px;height:33px;vertical-align:middle;" onclick="RemoveMarker()"/>
<input type="button" value = "画折线" style="width:100px;height:33px;vertical-align:middle;" onclick="CreatePolyline()"/>
<input type="button" value = "画多边形图形" style="width:100px;height:33px;vertical-align:middle;" onclick="CreatePolygon()"/>
<input type="button" value = "画圆" style="width:100px;height:33px;vertical-align:middle;" onclick="CreateCircle()"/>
<div style="height: 4px"></div>
<input id="address" type="textbox" value = "澳门大学" style="font-size: 18px;vertical-align:middle; width:50%;padding: 3px 3px 3px 3px;"/>
<input type="button" style="width:63px;height:33px;background-image: url(images/search.jpg);vertical-align:middle;" onclick="showLocation()" />
<input id="getAddress" type="textbox" style="font-size: 18px;vertical-align:middle; width:50%;padding: 3px 3px 3px 3px;"/>
<input type="button" style="width:63px;height:33px;vertical-align:middle;" value = "获取地址" onclick="getLocation()" />
<div style="height: 4px"></div>
<input id="addressSearch" type="textbox" value = "bank" style="font-size: 18px;vertical-align:middle; width:50%;padding: 3px 3px 3px 3px;"/>
<input type="button" style="width:63px;height:33px;vertical-align:middle;" value = "地址搜索" onclick="addressSearch()" />
<input id="wordSearch" type="textbox" value = "银行" style="font-size: 18px;vertical-align:middle; width:50%;padding: 3px 3px 3px 3px;"/>
<input type="button" style="width:63px;height:33px;vertical-align:middle;" value = "文字搜索" onclick="wordSearch()" />
<div style="height: 4px"></div>
<input id="distance" type="textbox" style="font-size: 18px;vertical-align:middle; width:40%;padding: 3px 3px 3px 3px;"/>
<input type="button" style="width:63px;height:33px;vertical-align:middle;" value = "计算距离" onclick="calDis()" />
<input type="button" style="width:63px;height:33px;vertical-align:middle;" value = "计算长度" onclick="calLen()" />
<input type="button" style="width:63px;height:33px;vertical-align:middle;" value = "计算面积" onclick="calArea()" />
<div style="height: 4px"></div>
<input type="button" style="width:63px;height:33px;vertical-align:middle;" value = "设置样式" onclick="setStyles()" />
<input type="button" style="width:63px;height:33px;vertical-align:middle;" value = "恢复样式" onclick="restoreStyles()" />
<input type="button" style="width:90px;height:33px;vertical-align:middle;" value = "添加天气图层" onclick="addLayer()" />
<input type="button" style="width:90px;height:33px;vertical-align:middle;" value = "移除天气图层" onclick="removeLayer()" />
<div style="height: 4px"></div>
<strong>出行方式: </strong>
<select id="mode" onchange="calcRoute();">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
<div style="height: 4px"></div>
<div id="map_canvas" style="width: 100%; height: 80%;"></div>
</body>
</html>
Google Map API V3开发（6） 代码的更多相关文章
- Google Map API V3开发（1）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API V3开发（2）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API V3开发（3）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API V3开发（4）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API V3开发（5）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google map API V3
本文主要总结Google map API V3使用中最简单也是最常见的一些操作以及相关概念,如果需要更加详细的信息,请直接阅读Google提供的关于map的文档. google map api v3文 ...
- Google Map API V3调用arcgis发布的瓦片地图服务
由于最近项目需要用到CAD制作的地图,但之前一直使用的是用谷歌离线瓦片地图的方式,怎么样把CAD图像地图一样有缩放,移动的功能放到网页显示成了难题, 原先的谷歌地图的代码难道就不能用了?重新写一套代码 ...
- Google 地图 API V3 针对移动设备进行开发
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- 如何使用Google Map API开发Android地图应用
两年前开发过的GoogleMap已经大变样,最近有项目要用到GoogleMap,重新来配置Android GoogleMap开发环境,还真是踩了不少坑. 一.下载Android SDK Manager ...
随机推荐
- Eclipse不自动编译java文件的终极解决方案
最近我的eclipse经常犯傻,项目中总是有很多,启动项目也是没有启动类.查了下项目中生成的class文件,我靠竟然没有,或者还是以前的.原来是eclipse犯傻了,它没帮我自动编译java文件.一般 ...
- [WPF系列]基础学习（一） WPF是什么？
引言 学习之前,我们首先大概了解下WPF诞生的背景以及它所能解决的问题或者新颖之处.WPF作为微软新一代的用户界面技术, WPF简介 WPF的全称是WindowsPresentationFound ...
- 《InsideUE4》-10-GamePlay架构（九）GameInstance
一人之下,万人之上 引言 上篇我们讲到了UE在World之上,继续抽象出了Player的概念,包含了本地的ULocalPlayer和网络的UNetConnection,并以此创建出了World中的Pl ...
- C#学习笔记-输入数据判断（int、double、string）
代码: using System; using System.Windows.Forms; namespace CheckInput { public partial class Form1 : Fo ...
- The Engine Document of JustWeEngine
JustWeEngine - Android FrameWork An easy open source Android Native Game FrameWork. Github Game core ...
- zlib压缩一个文件为gzip格式
网上有很多针对zlib的总结,但是很零散,自己经过总结,实现了用zlib压缩一个文件为gzip格式,似的可以直接使用winr工具解压. 具体方法是使用zlib的deflate系列函数,将buffer压 ...
- BZOJ1055: [HAOI2008]玩具取名[区间DP]
1055: [HAOI2008]玩具取名 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1588 Solved: 925[Submit][Statu ...
- c++ const函数是什么意思
c++ const函数是什么意思 只读类型 const修饰在类的成员函数的尾部,表示这个函数不会修改类的成员.相当于this指针是const的.
- 第2章 Linux系统安装（3）_SSH连接Linux工具：SecureCRT和WinSCP
4. SSH连接Linux工具 4.1 Linux网卡配置 (1)临时配置: ifconfig eth0 192.168.32.100 //给eth0网卡指定IP,写在ROM里的,关机会丢失. (2) ...
- ReactNative新手学习之路03真机调试
React Native新手入门03真机调试(iOS) 从设备访问开发服务器 在启用开发服务器的情况下,你可以快速的迭代修改应用,然后在设备上查看结果.这样做的前提是你的电脑和设备必须在同一个wifi ...