Tencent Maps JavaScript API calls

1, load maps API

Direct introduction page

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77 URL is the location of the file API, v2.0 identifies the current version refers to the use of the API, key = [aPPLICATION exploitation key]

2, create a map of accommodating container div

<div id="container" style="width:500px; height:300px"></div>

To display a map on a Web page, you must create a container in a Web page. Usually, we get this element by creating a div element named in the browser's Document Object Model (DOM) in reference to do this.

In the above example, we define div called "container" and set its size using style attributes. Maps will automatically adjust its size container size .

3, the basic object Map

var map = new qq.maps.Map(document.getElementById('container'),myoptions);

JavaScript class represents a map is the Map class. Objects of this class define a single map on a page. We use this class to create a new instance of the JavaScript new operator. When you create a new map instance, you specify a DOM node (usually a div element) in the page as a container for the map. HTML node is a child node JavaScript document object, and we obtain a reference to this element via the document.getElementById () method. This code defines a global variable (named map), and assigned to the variable new Map object. Function Map () is called a constructor and its definitions refer to the "Reference Manual"

myoptions is a map configuration object.

4, initialize the map

map.panTo(new qq.maps.LatLng(39.916527,116.397128));

After passing through Map constructor to create a map, you need to perform an operation is about to initialize it. Initialize () method to complete the map of panTo. The panTo () method requires LatLng latitude and longitude coordinates, and must call this method before performing any other operation (set any other attribute of the map itself comprises a) map.

LatLng is the latitude and longitude Longitude latitude abbreviation

5, load maps

<body onload="init()">

When the HTML page is displayed, the Document Object Model (DOM) that is expanded and receiving images and other external script and incorporated into the document object. To ensure that only after the page has fully loaded the page on our map , we only receive function performs construction Map of the element after the onload event in the HTML page. Doing so unpredictable behavior can be avoided, and we can be more control over how and when to draw the map. body tag onload attribute is an example of an event handler. Tencent Maps Javascript API also provides a set of events that you processed to determine state changes. For more information, see Map Events section.

Reference Case 1:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>简单地图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        html,body{
            width:100%;
            height:100%;
        }
        *{
            margin:0px;
            padding:0px;
        }
        body, button, input, select, textarea {
            font:12px / 16px verdana, is Helvetica, are arial, the sans-serif companion;
        } 
        P { 
            width: 603px; 
            padding - Top: 3px; 
            overflow: hidden; 
        } 
        .btn { 
            width: 142px; 
        } 
        #container { 
            min - width: 600px; 
            min - height: 767px; 
        }
     </ style> 
    <Script charset = "UTF-. 8" the src = "https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"> </ Script> 
    <Script> 
        window. the onload = function () {
 // direct load map 
            // initialize the map init function custom function name
            function the init () {
                 // definition of variables of the calling map qq.maps.Map () Constructor Map display container 
                var map = new new qq.maps.Map (document.getElementById ( "Container" ), { 
                    Center: new new qq.maps .LatLng (39.916527,116.397128),       // map the geographical coordinates of the center of .latitude longitude longitude latitude 
                    zoom: 8                                                  // set the zoom level 
                }); 
            } 
            // call the function to initialize the map, can be written in the body of the <body onload = "init () "> 
            // the init (); 

            / * 
            * function the init () { 
                  var myLatlng new new qq.maps.LatLng = (-34.397, 150.644);
                  var myOptions = {
                    zoom: 8,
                    center: myLatlng,
                    mapTypeId: qq.maps.MapTypeId.ROADMAP
                  }
                  var map = new qq.maps.Map(document.getElementById("container"), myOptions);
              }
            * */
        }
    </script>
</head>
<body onload="init()">
<!--   定义地图显示容器   -->
<div id="container"></div>
</body>
</html>

View Code

Map Events

Tencent Maps API has an event interface, users can add different events extend according to their different needs.

Currently Tencent map provided by event type There are two types:

User events (such as "click map" mouse events) are propagated from the DOM to Tencent in the Maps API. These events are separate and distinct from standard DOM events. Including: the click event (click), double-click the event (dblclick), mouse over events (mouseover), mouse movements (mousemove) and so on;
Tencent Maps API specific event, MVC state change notifications reflect changes Tencent Maps API objects and naming conventions to property_changed. Such as: change zoom level events (zoom_changed), content change event (content_changed) and so on.

1, add a map click event

var listener = qq.maps.event.addListener ( 
    Map,
     'the Click' ,
     function () { 
        Alert ( 'You clicked map.' ); 
    } 
);

Use qq.maps.event.addListener () event can be bound to a particular object, and returns a listener object. The method of the first parameter of the event objects are bound, the second event type parameter, the third parameter is the processing method of the event .

2, event acquisition parameters

addListener () event is triggered when the DOM event object passed will approach the event, and add the geographic coordinates of the cursor position and attributes LatLng event object .

qq.maps.event.addListener(
    map,
    'click',
    function(event) {
        console.log('经度',event.latLng.lat,' 纬度:',event.latLng.lng);
    }
);

3, remove the event

var listener = qq.maps.event.addListener ( 
    the Map,
     'click' ,
     function () { 
        Alert ( "You clicked on the map. ' ); 
    } 
); 
// remove the click event. 
qq.maps.event.removeListener ( listener);

Map control

Tencent Maps API control is a UI element of the user interaction with the map. API provides a variety of user-friendly control directly, and to provide custom Control, the maximum meet user demand.

Currently Tencent Maps API controls provided are:

Navigation controls
Scale Control
Custom controls, etc.

1, add controls to the map

Add a scale control on the map, and the control is placed in the lower left corner of the map, to add the following code:

Adding scale controls

map = new qq.maps.Map(
    document.getElementById("container"),
    {
        center: new qq.maps.LatLng(39.914850, 116.403765),
        zoom: 13
    }
);
var scaleControl = new qq.maps.ScaleControl({
    align: qq.maps.ALIGN.BOTTOM_LEFT,
    margin: qq.maps.Size(85, 15),
    map: map
});

Maps covering

Cover means everything to cover the map above. Covering its own geographic attributes, by setting the geographic attributes to control the position of the cover in the map .

Tencent Maps API includes covering are:

Mark
Broken line
Polygon
Round
Information window, etc.