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.VeVB.COM/201409/other/api_v2.5.1.js" type="text/javascript"></script>
2. Website initialization loading event:
window.onload = function () { var map = new sogou.maps.Map(document.getElementById("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://www.w3.org/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.VeVB.COM/201409/other/api_v2.5.1.js" type="text/javascript"></script><script>window.onload = function () { var map = new sogou.maps.Map(document.getElementById("map_canvas"), {});}</script></head><body> <form id="form1" runat="server"> <div id="map_canvas"></div> </form></body></html>Specify the display of Mocheng map
The key code is as follows:
window.onload = function () { var myOptions = { zoom: 10,center: new sogou.maps.Point(12956000, 4824875) };//City coordinates, this coordinate is Beijing coordinate var map = new sogou.maps.Map(document.getElementById("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://www.w3.org/1999/xhtml"><head id="Head1" 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.VeVB.COM/201409/other/api_v2.5.1.js" type="text/javascript"></script><script>var map;//Create global variable window.onload = function () { var myOptions = { zoom: 10, center: new sogou.maps.Point(12956000, 4824875) };//Specify city map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);//Create map}//SetMapTypeId method example function setMapTypeId(num) { //Set map type, such as: //sogou.maps.MapTypeId.ROADMAP Normal map//sogou.maps.MapTypeId.SATELLITE Satellite map//sogou.maps.MapTypeId.HYBRID Satellite and road network mixed map//map.setMapTypeId(sogou.maps.MapTypeId.HYBRID) switch (num) { case 1: map.setMapTypeId(sogou.maps.MapTypeId.ROADMAP); break; //Normal map case 2: map.setMapTypeId(sogou.maps.MapTypeId.SATELLITE); break; //Satellite map case 3: map.setMapTypeId(sogou.maps.MapTypeId.HYBRID); break; //Satellite and road network mixed map}}//panBy method example map manually move function panBy(a, b) { map.panBy(a, b)}//SetOptions method example displays the specified region function setOptions() { //Set the map center, level, and type map.setOptions({ center: new sogou.maps.Point(13522000, 3641093), zoom: 12, mapTypeId: sogou.maps.MapTypeId.ROADMAP })}//setCenter method example shows that the specified regions a and b are map coordinates and C are map level function setCenter(a, b, c) { map.setCenter(new sogou.maps.Point(a, b), c)}//fitBounds method example jumps to the specified range function fitBounds() { //Set a range near the Forbidden City var bounds = new sogou.maps.Bounds(12955101, 4824738, 12958355, 4827449); //Set the map to display all this range //Note: instead of setting bounds to this value, adjust to the appropriate position map.fitBounds(bounds)}</script></head><body> <form id="form1" 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 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 up" onclick="panBy(0,-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 id="map_canvas" ></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 sogou.maps.Point(12956000, 4824875); //Specify the point-slash position var map = new sogou.maps.Map(document.getElementById("map_canvas"), {}); //Initialize the map var marker = new sogou.maps.Marker({ position: location,//Draw coordinate title: "Draw point",//Draw point name label: { visible: true, align: "BOTTOM" },//Draw point display form map: map, });//Addraw point to mapDynamic stroke addition
window.onload = function () { //Initialize map map = new sogou.maps.Map(document.getElementById("map_canvas"), {});//Add click event for the map sogou.maps.event.addListener(map, 'click', function (event) { var marker1 = new sogou.maps.Marker({ position: event.point, map: map }); }); }Range measurement based on two stroke points
//Get the only example of the class function getInstance(a) { a.hasOwnProperty("_instance") || (a._instance = new a); return a._instance}//Two points are connected function Lines(myLatlng, myPoint) { var converter = getInstance(sogou.maps.Converter); var distance = converter.distance(myLatlng, myPoint); //Two points link var line = new sogou.maps.Polyline({ path: [myLatlng, myPoint], strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 1, title: parseInt(distance) + "meter", 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://www.w3.org/1999/xhtml"><head id="Head1" 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.VeVB.COM/201409/other/api_v2.5.1.js" type="text/javascript"></script> <script> var map;var num;var Listener; //Get the only example of the class function getInstance(a) { a.hasOwnProperty("_instance") || (a._instance = new a); return a._instance } window.onload = function () { //Initialize map map = new sogou.maps.Map(document.getElementById("map_canvas"), {}); } function AddCj() { var mypoint; var myPoint; num = 0; //Add a click event to the map, display the current coordinates after clicking and add click strokes Listener = sogou.maps.event.addListener(map, 'click', function (event) { if (num == 0) { mypoint = myPoint = event.point; //Get the coordinates of the click position} else { myPoint = mypoint; mypoint = event.point; //Get the coordinates of the click position} Lines(mypoint, myPoint); num++; }); } function DelCj() { sogou.maps.event.removeListener(Listener) } //Two points are connected function Lines(myLatlng, myPoint) { var converter = getInstance(sogou.maps.Convertor); var distance = converter.distance(myLatlng, myPoint); //Two points are linked var line = new sogou.maps.Polyline({ path: [myLatlng, myPoint], strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 1, title: parseInt(distance) + "meter", map: map }); placeMarker(myLatlng, parseInt(distance)); } // Dynamically add tracing points and create tracing points based on the specified coordinates function placeMarker(location,jl) { var clickedLocation = location; var marker1 = new sogou.maps.Marker({ position: location, title: jl+"meter", label:{visible:true,align:"BOTTOM"}, map: map }); } function Mapclear() { num = 0; map.clearAll(); } </script></head><body> <form id="form1" runat="server"> <input type="button" value="range measurement" onclick="AddCj()" /> <input type="button" value="Cancel ranging" onclick="DelCj()" /> <input type="button" value="Clear" onclick="Mapclear()" /> <div id="map_canvas" ></div> </form></body></html>I hope this article will be helpful to everyone's sogou map development