In the visual prototype, the map is a commonly used component, so today the author will teach you how to create a prototype template for dragging and dropping a map. Generally speaking, most people directly call charts like AutoNavi Map and Baidu Map. The disadvantage of this method is that it needs to be connected to the Internet, and it needs to understand a little code when modifying, and the maps are provided by others and cannot be used by themselves. Map materials such as detailed maps of parks, or maps of shopping malls are not very suitable.
So today I'm going to teach you how to make a Torazzo moving map effect without calling an external map. The completed production should have the following interactive effects: Drag the map with the mouse to view the details of each direction; After the template is made, you only need to import the map material, and the interactive effect can be automatically . Preparation b2b data of basic materials We only need to use two components for this prototype, one is the picture component and the other is the dynamic panel. We import the pre-image into the image component. It should be noted here that the original image should be uploaded, preferably a larger one. If it is too small, there is no room for moving.
The image size in the case is 2666*1500. The dynamic panel should uncheck the adaptive content, and the size should be smaller than the picture, in the case of 900*507. After we move the picture into the dynamic panel, we need to set the initial position. Here, it is better that the middle map is just in the area displayed by the dynamic panel. In the case, the coordinates of the picture are -883, -497. Here is a quick way, you can create a new rectangle with the same size as the dynamic panel, and then put it at the position of 0, 0, first select the rectangle, select the picture, click the left and right center and the top and bottom center, so that you can quickly reach the corresponding position.