当前位置：网站首页>Use of Baidu map

Use of Baidu map

2022-07-02 04:39:00 【Da Da Q】 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no">
    <title> Browser positioning </title>
    <style>
        html,body,#allmap{
            height: 100%;
            width: 100%;
            overflow:hidden;
            margin:0;
            font-family: " Microsoft YaHei ";
        }
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=0AWEFIYAAjXf0RGWtiEGDXn0H3g3yn51"></script>
</head>
<body>
    <div id="allmap"></div>
    <script>
        // Baidu Maps API function 

        /* Namespace ：API Use BMap As a namespace , All classes are under this namespace .
             such as ：BMap.Map、BMap.Control、BMap.Overlay.
        Map It's a map API The core of the class , Used to instantiate a map .
        * Constructors ：Map(container,opts)    Create a map instance in the specified container .
        * Then you need to call Map.centerAndZoom() Method to initialize the map . Uninitialized maps will not be able to do anything .
        centerAndZoom(center,zoom)         Initialize map 
        * Be careful ：
        *1. If center The type is Point when ,zoom Assignment must be made. , Range 3-19 level .
        *2. If center When the type is string , such as “ Beijing ”,zoom You can ignore , The map will automatically be based on center Best fit zoom Level .
        */
        var map = new BMap.Map("allmap");// Create a map instance 
        map.centerAndZoom(new BMap.Point(116.404, 39.915),19);// Initialize map ： Set the coordinates of the center point and the zoom level 
        map.enableScrollWheelZoom(true);     // Turn on mouse wheel zoom 

        //Geolocation class ： Returns the user's current location .
        // This method utilizes the browser's geolocation Interface to get the current location of the user , Unsupported browsers will not be available .
        // Constructors ： establish Geolocation Object instances 
        var geolocation = new BMap.Geolocation();

        /*Geolocation() Methods of constructors ：
        getCurrentPosition()： This method will return the current location of the user .
        getStatus()： Return status code . The status code returned after successful positioning is ：BMAP_STATUS_SUCCESS.
          If it is another status code, it means that your current location cannot be obtained .
         When the location is successful , The parameters of the callback function are GeolocationResult object , Otherwise null.
        GeolocationResult, This category serves as Geolocation Of getCurrentPosition Method , Non instantiable .
        GeolocationResult Class has properties ：point（ Return the result after successful positioning , That is, the coordinate point of the current position ）
        */
        geolocation.getCurrentPosition(function(result){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                /*Maker Class represents an image annotation on a map .
                * Constructors ：Maker(point: Point, opts: MarkerOptions)   Create an image annotation instance .
                *point Parameter specifies the geographic location of the image annotation ;opts Is an optional parameter .*/
                var mk = new BMap.Marker(result.point);
                /* Core class Map Methods ：
                 addOverlay—— Add an overlay to the map , An instance of an overlay can only be added to the map once 
                 panTo—— Change the center point of the map to the given point .*/
                map.addOverlay(mk);
                map.panTo(result.point);
                /*Point Class represents a geographical coordinate point .
                * Constructors ：Point(lng,lat)     Creates a geographic point coordinate with the specified longitude and latitude .
                * This class has two properties ：lng  Geographic longitude  lat  Geographical latitude 
                */
                alert(" The longitude of your current location is ：" + result.point.lng + ", Latitude is ：" + result.point.lat);
            }else{
                alert(" seek failed ！" + this.getStatus());
            }
        });
    </script>
</body>
</html>

原网站

版权声明
本文为[Da Da Q]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202151909023861.html

边栏推荐

猜你喜欢

随机推荐