Optimized brand logo style of sogou map for js version, jsbrand

Optimized brand logo style of sogou map for js version, jsbrand

From the previous blog, we can see that there are several similar brand signs that block each other and cannot be completely displayed. How can this problem be solved? Today we will study this solution.

In fact, to avoid being blocked, you can change the positions of these brands, rather than always pointing down the arrows to the scenic spots. What if I change the direction of the arrow? First, we need to know how it was originally handled. This must start with spirit.

Let's talk about the parameters of spirit:

{Url: "http://api.go2map.com/maps/images/v2.5/2.png", imgSize: [], // [[left], [Middle], [right], [tip] // [clipLeft, clipTop, width, heigth] clips: [[,], [,], [,], [,], // [Coordinate Position of the pin binding] anchor: [16, 23], // The offset footOffset: [0,-3]}

Here is the description on the official website. A url is the url of an image. It can be a local image. ImgSize is the pixel size of the image. Clips is the position where the source image is cut. Anchor is the coordinate of the pointed foot in the map. The parameter is also the offset in the image. FootOffset is the position where the entire pin is displayed in the map.

Since this brand can adapt to the width, I thought it was done with multiple images, but I saw the image () corresponding to the url and found that it was just an image. The adaptive width is the benefit of clips settings. Clips is to split different positions from the image and display it as an image. Clips can be divided into four parts. Adaptive width can be set on the left, middle, and right. The pointed foot is the position of the arrow in the image. Each cut-out image is segmented from the coordinates + width and height in the upper left corner. Why not set more images? This is to reduce the number of downloading small icons.

Finally, I understood how to deal with this brand arrow. To change the arrow direction, you must modify the image. If you learn to do ps, this job will be much easier. Below are my modified images:

Just a few arrows. If you want to turn the arrow to the right, right-click the right arrow in the sharding parameter, and then set anchor to offset the arrow to the location of the Scenic Spot. FootOffset needs to be adjusted to the right of the entire image. It's easy. Just try to adjust it. Back to our original topic. Now there are multiple scenic spots that may need to be directed to different directions, so we can't set them to death, so we need to set four functions to get the spirit in the middle of the 4 direction. Select different brands based on the actual situation. Below is the function I adjusted:

After setting up the four js methods, how can we set different brand points for different scenic spots? In fact, it is very simple. We only need to associate each attraction with the called method name and call it in bytes using different names.

// Load the coordinate data function loadScenic () {p = [{x: 12942902.5, y: 4836960.5, title: 'summer Palace ', brand: 'up'}, {x: 12933625.5, y: 4836929.5, title: 'workshop, Botanical Garden ', brand: 'lowdown'}, {x: 12946300.5, y: 4839226.5, title: 'yuanmingyuan ruins park ', brand: 'lowdown '}, {x: 12948437.5, y: 4826035.0, title: 'yuantan Park', brand: 'up'}, {x: 12950304.5, y: 4829984.0, title: 'Beijing aquarium ', brand: 'left'}, {x: 12948074.5, y: 4829765.0, title: 'zizhu Yuan Park', brand: 'right'}, {x: 12922964.5, y: 4853605.5, title: 'phoenix ridge natural scenic spot ', brand: 'low'}];}

In the scenic spots array, set a brand attribute and set the value range to up, down, left, and right. Then write a function, which calls the corresponding method name through brand:

// Function get_spirit (flag) {return eval ("get _" + flag + "_ spirit ()");}

The function of modifying the loading signage is as follows:

// Load the tag 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: get_spirit (p [I]. brand) // get_right_spirit (), content: p [I]. title + "<br/> City: Beijing" // visible or not. The default value is true, and the default value is true. visible: true // The fixed width of the specified content area is 80. If this parameter is not specified, it will automatically adapt according to the content size, fixSize: new sogou. maps. size (80, 0) // specifies css. css must be defined in the style sheet beforehand. css: "brand"}); brands. push (brand); // Add the generated brand to the brands array }}

: The effect is good. Is there a little heart? Let's get started! If you have a high aesthetic, you will find that, although they are all wrong, they are not aesthetic. What should we do? In a blog post, I will make the final simplified version. Let's look forward to it.

Development of sogou map using aspnet

This is related to js. 80% of the Code in JS may not be found when you access your map_canvas. Originally, js found your map_canvas under the body, however, if you put map_canvas under the form under the body, there will be more than one level, and no results will be found.

Website Optimization

Updating the latest keywords often updates things on the website to include Baidu and Google.