Add brand sign on the JS version of Sogou map

In the previous blog post, I added the marker tag on the Sogou map, but in the user experience is not enough, if you want to know some information, you have to point the mouse to marker, to see the value in the title. Is there a kind of thing that can be displayed directly on the marker?

In fact, there are many ways to do it. Sogou maps provide overlay classes, but can display information directly on the page, seemingly only Infowindow,label and brand. General Infowindow is used to display a large amount of information. So we show a small amount of information that is generally chosen by label and brand. But the label shows a more general effect, Four Corners, and brand is a rounded rectangle. So I recommend using brand. Of course, these two are supported CSS, if you have a good CSS technology, you can also label the same as brand.

Today I will share with you in the JS version of Sogou map, add brand signs.

First of all, a sample code for the official website: Click here to go to view. I also put out my code first, let's get a glimpse of it:

Start by defining a brand array to record brand information for all attractions.

  var brands = [];//record brand information for all attractions

Then add a JS function to set up a brand for all attractions.

  Load token function Addbrand () {for (Var i=0;i<p.length;i++) {var brand = new Sogou.maps.Brand ({position : New Sogou.maps.Point (P[I].X,P[I].Y), Map:map, spirit: {URL: "Http://api.go2map.com/ma Ps/images/v2.5/2.png ", imgsize:[140,77],//[[left],[middle],[right],[foot]]//[clipleft,cliptop,widt H,heigth] clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[0,53,33,23]],//[the position of the pin binding coordinates] anchor:[        16,23],//PIN trimmer offset footoffset:[0,-3]}, content:p[i].title+ "<br/> City: Beijing" is visible, default is True, Visible:true//Specifies a fixed width of 80 for the content area, or, if not specified, automatically adapts to the content size//,fixsize:new sogou.maps.Size (80    , 0)//specify CSS,CSS to be defined in the style sheet beforehand, CSS: "brand"}); Brands.push (brand);//Add the generated brand to the brands array//Listen for the object is brand itself//sogou.maps.event.addlistener (brand, "MouseOver", function ()//{//alert ("Occurrence mouseover event, across" +this.getcontent ())//}); }//Listener object is MAP, listen only once to//sogou.maps.event.addlistener (map, "Brandclick", Function (brand)//{//alert ("Occurrence Brandclick event, clicked" +br  And.getcontent ())//}); }

Finally, modify the Initialize method to add the newly-written JS method to this side:

  Initialize data  function Initialize () {    //omit the previous code        here ... Load attraction Mark    addmarker ();        Add attraction sign    addbrand ();      }

The code is all there, and the style information is definitely indispensable. To add styles to a style:

. Brand{font-size:12px;color: #fff; white-space:nowrap;margin:12px 0 0;}

As follows:

The effect looks good. Of course, there is a bit of project occlusion between the signs, this problem later resolved. Now let me explain this piece of code.

to create a brand object, please crossing the Web description. When building brand, you need to specify the position, which is the map coordinates, can be sogou map coordinates or latitude and longitude coordinates. My Code sets position to the coordinates of each attraction. Map is the currently created mapping object. Content is the display. CSS defines the style of the text in the tag in the CSS class. Spirit is the background image used in this sign. If you do not set the Fixsize, then this brand will be automatically extended based on the content length. is not very intimate ah. Come on, try it.

Next blog post, we need to address the issue of brand project occlusion. If the heart friend may have found out, we have to start from the spirit. Please look forward to it.

Add brand sign on the JS version of Sogou map