Google Map API V3开发（1）
Google Map API V3开发（2）
Google Map API V3开发（3）
Google Map API V3开发（4）
Google Map API V3开发（5）
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>
