Code in the Google MAP learning process

Last Update:2016-05-13 Source: Internet

Author: User

Tags polyline

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<! DOCTYPE html>
<title>simple Click event</title>
<meta name= "viewport" content= "initial-scale=1.0, User-scalable=no" >
<meta charset= "Utf-8" >
<style>
HTML, Body {
height:100%;
margin:0;
padding:0;
}
#map {
height:100%;
}
#hiddenUI, #showUI, #delUI, #addUI, #removePathUI {
Background-color: #fff;
border:2px solid #fff;
border-radius:3px;
box-shadow:0 2px 6px Rgba (0,0,0,.3);
Cursor:pointer;
Float:left;
margin-bottom:22px;
Text-align:center;
}
#hiddenText, #showText, #delText, #addText, #removePathText {
Color:rgb (25,25,25);
Font-family:roboto,arial,sans-serif;
font-size:15px;
line-height:25px;
padding-left:5px;
padding-right:5px;
}
#showUI, #delUI, #addUI, #removePathUI {
margin-left:5px;
}
</style>

<body>
<div id= "map" ></DIV>
<script>
//store marker
Var markers = [];
//Marker range
var bounds = {
north:36.104595,
south:36.063254,
east:120.349731,
west:120.42869 5
};
//Specific range
var lngspan = bounds.east-bounds.west;
var latspan = Bounds.north-bounds.south;

Function Initmap () {
var mylatlng = {lat: -25.363, lng:131.044};
var qingdao = {lat:36.06616, lng:120.3829} ;
var other = {lat:36.964, LNG:-122.015};
//Custom style
var styles = [
{
Stylers: [
{hue: ' #00ffe6 '},
{saturation: -20}
]
},{
FE Aturetype: "Road",
ElementType: "Geometry",
Stylers: [
{lightness:100},
{visibility: "simplified"}
},{
Featuretype: "Road",
ElementType: "Labels",
stylers: [
{visibility: "off"}
]
}
] ;

//Set map style
var styledmap = new Google.maps.StyledMapType (styles,
{name: "Custom Map"});
var map = new Goog Le.maps.Map (document.getElementById (' Map '), {
Zoom:12,
Center:qingdao,
Rotatecontrol:true,//rotation control Use
//maptypeid:google.maps.maptypeid.satellite,//to display satellite maps only when zoomed in to a certain scale
Maptypeid: Google.maps.MapTypeId.ROADMAP,//Road map
heading:180//Indicates the angle of departure from the North
});
//Custom map style
var mapoptions = {
Zoom:12,
Center:qingdao,
maptypecontroloptions: {
Maptypeids: [Go Ogle.maps.MapTypeId.ROADMAP, ' Map_style ']
}
};
//Reset the map
var map = new Google.maps.Map (document.getElementById (' map '),
Mapoptions);

//Display 45-degree image 0 to not display
Map.settilt;
//Set style
Map.mapTypes.set (' Map_style ', styledmap);
Map.setmaptypeid (' Map_style ');

Set map styles
Map.setoptions ({styles:styles});

var marker = new Google.maps.Marker ({
Position:qingdao,
Map:map, but through Marker.setmap (map), to show
Title: ' Hello marker '
});

Set Display marker
Marker.setmap (map); Set to blank to not display

function Control (controldiv, map) {

Hide button
var Hiddenui = document.createelement (' div ');
hiddenui.id = ' Hiddenui ';
Hiddenui.title = ' Click to hidden all marker ';
Controldiv.appendchild (Hiddenui);

Set CSS for the control interior.
var hiddentext = document.createelement (' div ');
hiddentext.id = ' Hiddentext ';
hiddentext.innerhtml = ' hidden tag ';
Hiddenui.appendchild (Hiddentext);

Display button
var ShowUI = document.createelement (' div ');
showui.id = ' ShowUI ';
Showui.title = ' Click to show all marker ';
Controldiv.appendchild (ShowUI);

var showtext = document.createelement (' div ');
showtext.id = ' Showtext ';
showtext.innerhtml = ' Display tag ';
Showui.appendchild (Showtext);

Delete button
var delui = document.createelement (' div ');
delui.id = ' Delui ';
Delui.title = ' Click to delete all marker ';
Controldiv.appendchild (Delui);

var deltext = document.createelement (' div ');
deltext.id = ' Deltext ';
deltext.innerhtml = ' delete tag ';
Delui.appendchild (Deltext);

Add Marker button
var Addui = document.createelement (' div ');
addui.id = ' Addui ';
Addui.title = ' Click to delete all marker ';
Controldiv.appendchild (Addui);

var addText = document.createelement (' div ');
addtext.id = ' AddText ';
addtext.innerhtml = ' add tag ';
Addui.appendchild (AddText);

Remove Line button
var Removepathui = document.createelement (' div ');
removepathui.id = ' Removepathui ';
Removepathui.title = ' Click to delete path ';
Controldiv.appendchild (Removepathui);

var removepathtext = document.createelement (' div ');
removepathtext.id = ' Removepathtext ';
removepathtext.innerhtml = ' Remove route ';
Removepathui.appendchild (Removepathtext);

Hide All Tags
Hiddenui.addeventlistener (' click ', function () {
Setmaponall (NULL);
});
Show All Tags
Showui.addeventlistener (' click ', function () {
Setmaponall (map);
});
Clear All Tags
Delui.addeventlistener (' click ', function () {
Setmaponall (NULL);
markers = [];
});
Add a random tag
Addui.addeventlistener (' click ', function () {
Randommarker (map);
});
Remove route
Removepathui.addeventlistener (' click ', function () {
Flightpath.setmap (NULL);
Workstart.setmap (NULL);
Workend.setmap (NULL);
})

}
var centercontroldiv = document.createelement (' div ');
var Centercontrol = new Control (centercontroldiv, map);
Centercontroldiv.index = 1;
centercontroldiv.style[' margin-top '] = ' 10px ';
Map.controls[google.maps.controlposition.top_center].push (CENTERCONTROLDIV);

Line Stroke
var flightplancoordinates = [
{lat:36.075620815001415, lng:120.43020844459534},
{lat:36.074025246504746, lng:120.4285454750061},
{lat:36.069949462636, lng:120.43118476867676},
{lat:36.06604691846644, lng:120.42285919189453},
{lat:36.074025246504746, lng:120.4139757156372},
];
var flightpath = new Google.maps.Polyline ({
Path:flightplancoordinates,
Geodesic:true,
Strokecolor: ' #FF0000 ',
strokeopacity:1.0,
Strokeweight:2
});

Flightpath.setmap (map);

var workstart = new Google.maps.Marker ({
Position:flightplancoordinates[0],
Label: "Up",
Title: "Start of work",
Map:map
});
var workend = new Google.maps.Marker ({
position:flightplancoordinates[(flightplancoordinates.length-1)],
Label: "Final",//label displays only the first character
Title: "End of work",
Map:map
});

Drawing polygons
var trianglecoords = [
{lat:36.06602136399105, lng:120.35249282982409},
{lat:36.082132409147086, lng:120.42076576221541},
{lat:36.10016285436, lng:120.3873546955059},
{lat:36.06602136399105, lng:120.35249282982409},
];

Construct the polygon.
var bermudatriangle = new Google.maps.Polygon ({
Paths:trianglecoords,
Strokecolor: ' #32CD32 ',
strokeopacity:0.8,
Strokeweight:2,
FillColor: ' #3CB371 ',
fillopacity:0.35
});
Bermudatriangle.setmap (map);

Draw a rectangle
var rectangle = new Google.maps.Rectangle ({
Draggable:true,//whether can be dragged
Editable:true,//whether editable
Strokecolor: ' #FF0000 ',
strokeopacity:0.8,
Strokeweight:2,
FillColor: ' #FF0000 ',
fillopacity:0.35,
Map:map,
Bounds: {
north:36.114595,
south:36.104595,
east:120.369731,
west:120.349731
}
});
Draw a Circle
var citycircle = new Google.maps.Circle ({
Draggable:true,//whether can be dragged
Editable:false,//whether editable
Strokecolor: ' #FF0000 ',
strokeopacity:0.8,
Strokeweight:2,
FillColor: ' #FF0000 ',
fillopacity:0.35,
Map:map,
Center:qingdao,
radius:600//Unit M
});

var marker = new Google.maps.Marker ({
POSITION:MYLATLNG,
Map:map,
Title: ' Click to zoom '
// });

Map.addlistener (' center_changed ', function () {
3 seconds after the center of the map have changed, pan back to the
Marker.
Window.settimeout (function () {
Map.panto (Marker.getposition ());
}, 3000);
// });

Map.addlistener (' zoom_changed ', function () {
Alert (' Current coordinates: ' +json.stringify (mylatlng) + ' \ n ' zoom level: ' +map.getzoom () ');
// });

Marker.addlistener (' click ', function () {
Map.setzoom (8);
Map.setcenter (Marker.getposition ());
// });

Setup window
var Infowindow = new Google.maps.InfoWindow ({
Content: "<p> change zoom level </p>",
Position:qingdao
});
Open window
Infowindow.open (map);
Adding a Zoom listener Event
Map.addlistener (' zoom_changed ', function () {
Infowindow.setcontent (' Zoom: ' +map.getzoom ());
});

Map.addlistener (' click ', Function (e) {
var latlng = e.latlng;

Adding DOM Listener Events
var listener = Google.maps.event.addDomListener (map, ' click ', function () {
Click to remove
var listener = google.maps.event.addDomListenerOnce (map, ' click ', function () {
Window.alert (' coordinates: ' +latlng);
// // });
Delete Listener Events
Google.maps.event.removeListener (listener);
Remove all listeners from a specific instance
Google.maps.event.clearInstanceListeners (map);

Add tag
Placemakerandpanto (latlng, map);

// });

Drawing Listener Events
Map.addlistener (' click ', ADDLATLNG);

Poly = new Google.maps.Polyline ({
Draggable:true,//whether can be dragged
Editable:true,//whether editable
Strokecolor: ' #00FA9A ',
strokeopacity:1.0,
Strokeweight:3
});
Poly.setmap (map);

}
Draw lines
var Poly;
function Addlatlng (event) {
var path = Poly.getpath ();
Path.push (EVENT.LATLNG);
}

Rounded
function Fordight (dight,how) {
Dight = Math.Round (Dight*math.pow (10,how))/math.pow (10,how);
return dight;
}
Label display
var labels = ' abcdefghijklmnopqrstuvwxyz ';
var labelindex = 0;

Add tag
function Placemakerandpanto (latlng, map) {
var marker = new Google.maps.Marker ({
POSITION:LATLNG,
draggable:true,//tags can be moved
animation:google.maps.animation.drop,//drop down effect BOUNCE bounce effect
label:labels[labelindex++% labels.length],//remainder display
Icon:url, display with custom images
Map:map
});
Add to Array
Markers.push (marker);
Map.panto (LATLNG);
var changelatlng = json.stringify (LATLNG);
Console.log (Changelatlng[0]);
var Infowindow = new Google.maps.InfoWindow ();
Marker.addlistener (' click ', function () {
Infowindow.setcontent ("Coordinates:" + latlng);
Infowindow.open (Marker.get (' map '), marker);
});

}
Set tag
function Setmaponall (map) {
for (var i = 0; i < markers.length; i++) {
Markers[i].setmap (map);
}
}
Random Landing
function Randommarker (map) {
var marker = new Google.maps.Marker ({
position:{
Lat:bounds.south + Latspan * math.random (),
Lng:bounds.west + Lngspan * math.random ()
},
draggable:true,//tags can be moved
animation:google.maps.animation.bounce,//drop down effect BOUNCE bounce effect
Map:map
});
Markers.push (marker);

Display coordinates
var Infowindow = new Google.maps.InfoWindow ({
Content: ' Coordinates: ' +marker.getposition ()
});
Marker.addlistener (' click ', function () {
Infowindow.open (Marker.get (' map '), marker);
});
}

</script>
<script src= "https://maps.googleapis.com/maps/api/js?key=aizasyb0de981xqtw4qs9xkyql-ay_imoklhlc8& Callback=initmap "Async defer>
</script>
</body>

Code in the Google MAP learning process

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More