Shulou(Shulou.com)06/02 Report--

This article is about how to use the map tagging of Baidu map API for you. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Overview of dimensioning

A Marker is a visible element used to represent the location of a point, and each dimension itself contains geographic information. For example, if you add a mark to the location of the Xidan mall, no matter the map moves or zooms, the label will move with it to ensure that it always points to the correct geographical location.

As can be seen from the above picture, no matter how the map changes, the label always points to the location of "Xidan Shopping Mall".

How do I know the coordinates of a point?

In the above example, we added a mark to the location of the Xidan mall, so how do I know its coordinate points? You can obtain the following through API's event mechanism:

Map.addEventListener ('click', function (e) {console.log (e.point);})

We added a listening function for click events to the map object. When clicking on a location on the map, the listening function outputs the current clicked location through the console (note that console support is required, such as firebug. If there is no console, you can use alert to output the lng and lat attributes of point). In addition, you can also use the coordinate pickup tool provided by API (http://dev.baidu.com/wiki/static/map/API/tool/getPoint/), which allows you to retrieve and click on the coordinates of any location on the map.

Dimension element composition

From the point of view of the composition of the DOM element, a complete annotation consists of the following parts:

Mark the click area

Callout icon

Dimension Shadow

Here is a schematic diagram:

In the implementation of map API, these three DOM elements are located in different containers, and these containers can be obtained by the map.getPanes () method, in which markerMouseTarget is the container where the click area is marked, markerPane is the container where the label icon is located, and markerShadow is the layer where the label shadow is located. You may need these container objects when customizing the overlay, and all you need to know here is how the various parts of the Marker are placed.

Custom dimension icon

The icon of the annotation can be customized, and the icon of the annotation can be customized through the Icon class. For example, I want to use the following picture as the annotation icon:

The size of this icon is known to be 20x32. We initialize the map, then define the Icon, and assign it to an Marker instance:

Varmap = newBMap.Map ('container'); map.centerAndZoom (newBMap.Point (116.380797, 39.918497), 18); var icon = new BMap.Icon (' pin.png', new BMap.Size (20,32), {anchor: new BMap.Size (10,30)}); varmkr = newBMap.Marker (newBMap.Point (116.38075) 39.918986), {icon: icon}); map.addOverlay (mkr)

We give the url of the picture required by icon, followed by the size of the picture, and we also add the anchor attribute. What is this for? One thing to pay attention to when customizing the annotation icon is the anchor of the annotation, which, in popular terms, is to specify which location of the picture corresponds to the real location of the annotation. We illustrate this through the following illustration:

We get a location on the map (the small black square at the bottom of the image above), so I also want me to mark the middle and lower end pointing to this location, which needs to be adjusted through anchor. The meaning of anchor is shown in the following figure:

That is, the offset of the anchor point from the upper left corner of the picture.

If you do not give anchor, API will automatically obtain the center point of the image as the anchor location:

We see that the location of the center of the marked image covers that small square area.

In addition to anchor, there is an infoWindowAnchor property that controls where the information window opens (note that the openInfoWindow method of Marker is called instead of the openInfoWindow method of Map), which is the same location as the anchor of icon by default:

The annotation is blocked by the bottom corner of the InfoWindow, and the opening position can be changed through the infoWindowAnchor attribute:

Varicon = newBMap.Icon ('pin.png', newBMap.Size (20,32), {anchor: newBMap.Size (10,30), infoWindowAnchor: newBMap.Size (10,0)})

Take a look at the effect:

The position of the sharp corners has changed.

Dimension drag and drop

Dimensions support drag and drop, and you can configure whether there is an animation effect. We modify the code for creating dimensions:

Varmkr = newBMap.Marker (newBMap.Point (116.38075 icon 39.918986), {icon: icon, enableDragging: true, raiseOnDrag: true})

The drag and drop function and the animation of the response are enabled here. If you drag and drop the map at this time, you will get the following effect:

By listening for the tagged dragend event, you can know the geographic location of the tagged after dragging:

Mkr.addEventListener ('dragend', function (e) {alert (e.point.lng +','+ e.point.lat);})

Dimension Shadow

In order to increase the three-dimensional effect, you can add shadows to the annotations separately, of course, you can also draw the shadows directly on the pictures used by icon, but because the shadows and the annotations themselves are together, it is not recommended to use any animation effects, otherwise it will lack realism. Shadows can be configured through the shadow property of MarkerOptions, and the type is also an instance of Icon. The specific method of use is the same as the icon property, so I won't repeat it here.

Thank you for reading! On "Baidu map API map tagging how to use" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.