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 ...
随机推荐
- 机器学习实战笔记(Python实现)-02-决策树
--------------------------------------------------------------------------------------- 本系列文章为<机器 ...
- 从零自学Hadoop(12)：Hadoop命令中
阅读目录 序 HDFS Commands User Commands Administration Commands Debug Commands 引用 系列索引 本文版权归mephisto和博客园共 ...
- python基础(七)函数
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 函数最重要的目的是方便我们重复使用相同的一段程序. 将一些操作隶属于一个函数,以后 ...
- “未来人类”的笔记本，谁买过哦
在jd上看到这款笔记本http://item.jd.com/1166095693.html.拽的很!看看哦,我等IT屌丝别吓着了,看图片欣赏下.
- NOIP2013火柴排队[逆序对]
题目描述 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度. 现在将每盒中的火柴各自排成一列, 同一列火柴的高度互不相同, 两列火柴之间的距离定义为: ∑(ai-bi)^2 其中 ai 表示 ...
- suid sgid sbit chattr lsattr
suid 一般用于二进制可执行文件,suid代表当用户执行此二进制文件时,暂时具有此文件所有者的权限 chmod 4xxx binfile sgid 一般用于目录,sgid代表当其他用户在此目录下创建 ...
- Reverse Nodes in k-Group
Reverse Nodes in k-Group Given a linked list, reverse the nodes of a linked list k at a time and ret ...
- OrcharNoCMS中的发布订阅使用
对于Orchard里面的EventBus,没有太多的文章去介绍说明.它最好的应用是发布订阅的应用. 使用介绍: 在Car模块中,我们定义一个接口,继承IEventHandler接口. 当我们在创建一条 ...
- margin-top无效的问题解决方法
今天碰到了margin-top无效的问题,解决方法也有很多一行代码就解决了 解决办法: 1.设置父元素或者自身的display:inline-block;(IE6.IE7不识别inline-block ...
- 记一次事件委托在 ios 下的兼容 bug
项目中碰到的兼容类 bug,记录一二. 页面上有几个同类型的控件,点击它们会触发一些事件,很显然,事件委托优于批量绑定.为了图方便,我将 click 事件绑定到了 document.body 上(绑定 ...