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 pickle库来存储数据对象
pickling有一个更常用的叫法是serialization,它是指把python对象转化成字节流byte stream, unpickling就是把byte stream转换成对象.python的 ...
- 【Linux】解决Wesnoth中文乱码问题
现在使用的系统是Linux Mint 18,安装了Wesnoth,发现打开之后部分中文显示正常,部分中文显示为乱码. 谷歌出的很多办法都只给出了几条指令,但并不具有普适性,我提供一种新的方法,通过修改 ...
- Ubuntu开发笔记
这些操作在ubuntu14.04.1或者ubuntu12.04.5中进行 首先,安装ubuntu12.04(LTS)版本 安装按照高级安装方式,系统分配40G如下: /dev/sda* ext4 ...
- 微信公共号的PHP开发（基础篇）——玩一下
最近没事儿开了个微信号,写点东西给家人啊什么的看,你们想看的话就这个嘛: 然后就意外的看到imooc上的微信公众号开发相关了.每天科研的累累的,做点这个不是很累的东西吧. 微信公共号开发 一.基础 1 ...
- Leetcode: sliding window maximum
August 7, 2015 周日玩这个算法, 看到Javascript Array模拟Deque, 非常喜欢, 想用C#数组也模拟; 看有什么新的经历. 试了四五种方法, 花时间研究C# Sorte ...
- MyBlog
2016-06-25 一直想在搭建一个自己的blog.说来惭愧,cnblogs中的个人博客虽笔耕不辍,但杂乱无章.然而之前总是嘴上说说.现在,终于要行动起来了. 初步计划: 思路: django + ...
- 第13章 Java常用类
1.自动装箱和自动拆箱 自动装箱:基本类型就自动的封装到与它相同类型的包装中:如: 创建一个对象时:Integer i = 100;本质上是编译器编译时为我们添加了:Integer i = new I ...
- css 实现未知图片垂直居中
1.demo html部分 <div class="demo"> <a href="#"><img src=" ...
- Github 使用
创建repository 可以在Github上无限制使用public repository进行源代码管理,创建一个repository很简单,不多说了. 获取代码到本地 首先要安装Git,然后使用命令 ...
- 【JavaScript】图片上传预览
上传文件实时显示[一张图片]: 个人理解:给img的src传值:这个值就是input[type='file']的value: 不过你要判断浏览器类型[很多]:IE6.0,IE7/8/9,Fixfox7 ...