Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > Simple implementation of JavaScript map drag function SpryMap_javascript skills

Simple implementation of JavaScript map drag function SpryMap_javascript skills

WBOY

Release： 2016-05-16 17:28:43

Original

1328 people have browsed it

Using it, you can easily achieve dragging effects similar to those on Google and Baidu maps. SpryMap is perfect for displaying large images. SpryMap is also highly customizable. You can set the starting position of the image, CSS style, etc. through parameters. In addition, you can also set whether to use a smooth drag effect.
How to use
First load the SpryMap script file in the head

Copy the code The code is as follows:

Add the image to be displayed on the page, such as Set the id to the img tag of worldMap

Copy the code The code is as follows:

Finally initialized when the page loads

Copy code The code is as follows:

var map = new SpryMap({id: "worldMap",
                                                                                                                                  : 800,
 startX: 200, 
 startY: 200,
 cssClass: "mappy"});

Related labels：

javascript map

source：php.cn

Previous article：js code to determine screen resolution_javascript skills Next article：Example code for jquery to realize dynamic increase and decrease of input box_jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn