Javascript implementation method of googlemap_javascript skills-JS Tutorial-php.cn

Javascript implementation method of googlemap_javascript skills

WBOY

Release： 2016-05-16 19:21:31

Original

1283 people have browsed it

This is a very typical background-position-x application. The technical content is not high, but the idea is still worth thinking about, which proves that there are many things that can be modified in DHTML. Use map for background. If it is more complicated, use ajax to dynamically load the background of the image, which is also a small map. I'm not going to delve into this because there are bottlenecks in the speed and efficiency of scripts.

Preliminary knowledge:
background-position-x------------- The X coordinate of the background image.
background-position-y------------- Y coordinate of the background image.

event.clientX --------------------------X coordinate of the mouse.
event.clientY --------------------------Y coordinate of the mouse.

JSON ---------------------------------- This word seems to be very popular now, since ajax in After action came out, it became even more popular. In a broad sense, it is the associative array of JavaScript. JSON (JavaScript Object Notation) is similar to this var o={name:"never-online",web:"http://www.never-online.net",blog:"http://blog.never-online .net"}, so you can use array relationship forms such as o.name, o.web or o['name'], o['web'].

Problem solving ideas:
The main difficulty of this map is the accuracy of the coordinates, that is, the coordinate direction of the background-position when the mouse moves.
If you solve the above problem, you will be more than half successful.

I use the usual method
Coordinates = coordinates after moving with the mouse - the original coordinates we saved.

The method to obtain the original coordinates is: neverOnlineMap._wrapper.X = event.clientX-parseInt(x.backgroundPositionX);
That is, use the current position of the mouse - the X coordinate of the image background
Image background coordinates = Mouse position - original position
The Y coordinate is similar to the X coordinate and will not be repeated. neverOnlineMap._wrapper.Y = event.clientY-parseInt(x.backgroundPositionY);

The source code is as follows:

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]