Sogou Map API Usage Examples Tutorial _javascript tips

This example describes the application of Sogou map API, which is a very practical technique. Share to everyone for your reference. The implementation methods are as follows:

Initialization of a map

1, add the reference map of the API file:

<script src= "Http://xiazai.jb51.net/201409/other/api_v2.5.1.js" type= "Text/javascript" ></script>

2, the site initialization Load event:

Window.onload = function () { 
var map = new Sogou.maps.Map (document.getElementById ("Map_canvas"), {});
 

Create a div with id map_canvas, custom div style, Web site runtime map automatically loaded;

The specific code is as follows

Specify Show Mo City 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); 

Map Properties Understand

Enumerate some of the commonly used properties such as: Map movement, map type conversion, jump to the designated city

The specific code is as follows

Map Stroke Properties

The important attribute on the map, add a stroke to the map, is a common method attribute,

Sogou API provides two kinds of stroke filling form default strokes and dynamic add strokes

Default stroke Add:

var location = new Sogou.maps.Point (12956000, 4824875); Specify the location of the stroke
var map = new Sogou.maps.Map (document.getElementById ("Map_canvas"), {});//Initialize map
var marker = new Sogou.maps.Marker ({
 position:location,//stroke coordinates
 title: stroke,///Stroke name
 Label: {visible:true, align: "BOTTOM"} ,//Stroke display Form
 map:map, 
 });//Add stroke to map

Dynamic Stroke Add

Window.onload = function () { 
//Initialize map
 = new Sogou.maps.Map (document.getElementById ("Map_canvas"), {}); c15/>//Add click event for map
sogou.maps.event.addListener (map, ' click ', Function (event) {
 var marker1 = new Sogou.maps.Marker ({
 position:event.point, 
 map:map
 });
 } 

ranging from two strokes

Gets the unique example
function getinstance (a) {
 a.hasownproperty ("_instance") of the Class | | (a._instance = new A);
 Return a._instance
}
//Two-point connected
function Lines (MYLATLNG, mypoint) { 
 var convertor = getinstance ( Sogou.maps.Convertor);
 var distance = convertor.distance (mylatlng, mypoint);
 Two-point link
 var line = new Sogou.maps.Polyline ({
 path: [Mylatlng, MyPoint],
 strokecolor: "#FF0000",
 strokeopacity:1.0,
 strokeweight:1,
 title:parseint (distance) + "M",
 Map:map
 }); 

According to the above properties to do a small module, the map dynamic ranging code is as follows:

Hopefully this article will help you with your Sogou map development