您的位置：首页 > 编程语言
Google Map API V3开发（6）代码

2016-04-15 11:37 447 查看
<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开发（6）代码
