This article describes the application of sogou map API, which is a very practical technique. Share it for your reference. The specific implementation method is as follows:
Initialization of the map
1. Add an API file that references the map:
<script src="http://xiazai./201409/other/api_v2.5." type="text/javascript"></script>
2. Website initialization loading event:
= function () {
var map = new (("map_canvas"), {});
}
Create a div with id map_canvas, custom div style, and the map is automatically loaded when the website runs;
The specific code is as follows
<html xmlns="http:///1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
<script src="http://xiazai./201409/other/api_v2.5." type="text/javascript"></script>
<script>
= function () {
var map = new (("map_canvas"), {});
}
</script>
</head>
<body>
<form runat="server">
<div ></div>
</form>
</body>
</html>
Specify the display of Mocheng map
The key code is as follows:
= function () {
var myOptions = { zoom: 10,center: new (12956000, 4824875) };//City coordinates, this coordinate is Beijing coordinatesvar map = new (("map_canvas"), myOptions);
}
Understanding map properties
List some commonly used properties such as: map movement, map type conversion, jump to designated cities
The specific code is as follows
<html xmlns="http:///1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
<script src="http://xiazai./201409/other/api_v2.5." type="text/javascript"></script>
<script>
var map;//Create global variables = function () {
var myOptions = { zoom: 10, center: new (12956000, 4824875) };//Designated city map = new (("map_canvas"), myOptions);//Create a map
}
//SetMapTypeId method examplefunction setMapTypeId(num) {
//Set map type, such as: // Normal map // Satellite map // Mixed map of satellite and road network //()
switch (num) {
case 1: (); break; //Normal map case 2: (); break; //Satellite Map case 3: (); break; //Satellite and road network mixed map }
}
//PanBy method example map manually movesfunction panBy(a, b) {
(a, b)
}
//SetOptions method example displays the specified regionfunction setOptions() {
//Set the map center, level and type at the same time ({ center: new (13522000, 3641093), zoom: 12, mapTypeId: })
}
//SetCenter method example Shows the specified regions a and b are map coordinates and C are map levelsfunction setCenter(a, b, c) {
(new (a, b), c)
}
//Sample of fitBounds method Jump to the specified rangefunction fitBounds() {
//Set a range near the Forbidden City var bounds = new (12955101, 4824738, 12958355, 4827449);
//Set the map to display all this range //Note: Instead of setting bounds to this value, adjusting it to the appropriate position (bounds)
}
</script>
</head>
<body>
<form runat="server">
<input value="Normal Map" onclick="setMapTypeId(1)" type="button"/>
<input value="Satellite Map" onclick="setMapTypeId(2)" type="button"/>
<input value="Satellite and Road Network Mixed Map" onclick="setMapTypeId(3)" type="button"/>
<input value="Move left" onclick="panBy(200,0)" type="button"/>
<input value="Move to the right" onclick="panBy(-200,0)" type="button"/>
<input value="Move up" onclick="panBy(0,200)" type="button"/>
<input value="Move down" onclick="panBy(0,-200)" type="button"/>
<input value="Move to the upper left" onclick="panBy(200,200)" type="button"/>
<input value="Shanghai" onclick="setOptions()" type="button"/>
<input value="Tianjin" onclick="setCenter(13046000,4714250,10)" type="button"/>
<input value="Forbidden City" onclick="fitBounds()" type="button"/>
<div ></div>
</form>
</body>
</html>
Map Stroke Properties
It is a very important attribute on the map. Adding trace points to the map is a common method attribute.
Sogou API provides two types of strokes to fill in the strokes. Default strokes and dynamic addition strokes.
Default strokes are added:
var location = new (12956000, 4824875); //Specify the point positionvar map = new (("map_canvas"), {});//Initialize the mapvar marker = new ({
position: location,//Draw the coordinates title: "Draw points",//Scan the point name label: { visible: true, align: "BOTTOM" },//Point display form map: map,
});//Add a stroke to the map
Dynamic stroke addition
= function () {
//Initialize the map map = new (("map_canvas"), {});
//Add a click event to the map(map, 'click', function (event) {
var marker1 = new ({
position: ,
map: map
});
});
}
Range measurement based on two stroke points
//Get the only example of the classfunction getInstance(a) {
("_instance") || (a._instance = new a);
return a._instance
}
//The two points are connectedfunction Lines(myLatlng, myPoint) {
var convertor = getInstance();
var distance = (myLatlng, myPoint);
//Two points link var line = new ({
path: [myLatlng, myPoint],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 1,
title: parseInt(distance) + "rice",
map: map
});
}
Based on the above attributes, a small module is made, and the dynamic ranging code on the map is as follows:
<html xmlns="http:///1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
<script src="http://xiazai./201409/other/api_v2.5." type="text/javascript"></script>
<script>
var map;var num;var Listener;
//Get the only example of the class function getInstance(a) {
("_instance") || (a._instance = new a);
return a._instance
}
= function () {
//Initialize the map map = new (("map_canvas"), {});
}
function AddCj() {
var mypointh; var myPoint;
num = 0;
//Add a click event to the map, display the current coordinates after clicking and add click stroke points Listener = (map, 'click', function (event) {
if (num == 0) {
mypointh = myPoint = ; //Get the coordinates of the click position }
else {
myPoint = mypointh;
mypointh = ; //Get the coordinates of the click position }
Lines(mypointh, myPoint);
num++;
});
}
function DelCj() {
(Listener)
}
//The two points are connected function Lines(myLatlng, myPoint) {
var convertor = getInstance();
var distance = (myLatlng, myPoint);
//Two points link var line = new ({
path: [myLatlng, myPoint],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 1,
title: parseInt(distance) + "rice",
map: map
});
placeMarker(myLatlng, parseInt(distance));
}
// Dynamically add tracing points and create tracing points based on specified coordinates function placeMarker(location,jl) {
var clickedLocation = location;
var marker1 = new ({
position: location,
title: jl+"rice",
label:{visible:true,align:"BOTTOM"},
map: map
});
}
function Mapclear() {
num = 0;
();
}
</script>
</head>
<body>
<form runat="server">
<input type="button" value="Distance measurement" onclick="AddCj()" />
<input type="button" value="Cancel ranging" onclick="DelCj()" />
<input type="button" value="Clear" onclick="Mapclear()" />
<div ></div>
</form>
</body>
</html>
I hope this article will be helpful to everyone's sogou map development