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 ...
随机推荐
- mongo学习笔记（一）：增删改查
安装:我是按这篇来弄的 一.Insert 1.db.person.insert({"name":"jack","age":20}) 2.va ...
- [Java入门笔记] Java语言基础（五）：数组
简介 数组可用用于存储存储多个数据,Java的数组要求所有的数组元素具有一种相同的数据类型.一旦数组初始化完成,数组在内存中的空间被固定下来,长度不可改变,即使把数组的元素清空,所占用的空间依然被保留 ...
- 微信浏览器的HTTP_USER_AGENT
在iPhone下,返回 1 Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, lik ...
- tomcat的简单安装及配置
实验系统:CentOS 6.6_x86_64 实验前提:防火墙和selinux都关闭 实验软件:apache-tomcat-8.0.24 jdk-8u60-linux-x64 jeecms-v6 一. ...
- Linux学习笔记1_用户和权限
自从我大微软终于放下身段,决定给开源社区一个迟来的拥抱,追随多年的拥趸们像是突然得到了女神的垂青,各种茫然失措.痛哭流涕.欢欣鼓舞,纷纷唱了起来:“等了好久终于等到今天,梦了好久终于把梦实现……”唱完 ...
- TFS 升级错误一则 TF400654
升级后报 [错误] TF400654: 无法配置规划工具.以下元素包含错误: BugWorkItems/BugWorkItems.TF400506: 此元素将定义表示 Bug 或缺陷的工作项的状态.每 ...
- 第32课 Qt中的文件操作
1. Qt的中IO操作 (1)Qt中IO操作的处理方式 ①Qt通过统一的接口简化了文件和外部设备的操作方式 ②Qt中的文件被看作一种特殊的外部设备 ③Qt中的文件操作与外部设备的操作相同 (2)IO操 ...
- Spring中的cglib动态代理
Spring中的cglib动态代理 cglib:Code Generation library, 基于ASM(java字节码操作码)的高性能代码生成包 被许多AOP框架使用 区别于JDK动态代理,cg ...
- 使用scrollpagination实现页面底端自动加载无需翻页功能
当阅读到页面最底端的时候,会自动显示一个"加载中"的功能,并自动从服务器端无刷新的将内容下载到本地浏览器显示. 这样的自动加载功能是如何实现的?jQuery的插件 ScrollPa ...
- 从数据库导出到excel
在项目 扬中 News shenbaocreateall //选中的id string cc = Request["IDcheck"]; Response.C ...