Use of Tencent map, add multiple tags and click events

Tencent map API website: http://lbs.qq.com/javascript_v2/index.html

Obtain the longitude and latitude of the current position

Before using Tencent map, you need to obtain the longitude and latitude of the specified location.
You can use the specific geographical location (for example, Chaoyang Joy City, No. 101, Chaoyang North Road, Chaoyang District, Beijing) to obtain the longitude and latitude. The specific acquisition method is not described here.
If you use Tencent map in wechat, you can call JSSDK to get the longitude and latitude of the current geographic location. The method is as follows:

    //Wechat JS-SDK obtains the longitude and latitude of the current position
    $.ajax({
        url: url_bjtest + "wechat/get_signature",
        type: "post",
        dataType: "json",
        data: { "url" : window.location.href },
        success: function (data) {
            wx.config({
                //debug: true, / / turn on the debugging mode. The return values of all the APIs that are called will come out in the client alert. To view the parameters passed in, you can turn them on on the pc side. The parameter information will be printed out through the log. It will only be printed on the pc side.
                appId: data.data.appId, // Required, unique ID of enterprise number, enter enterprise number corpid here
                timestamp: data.data.timestamp, // Required, generate signature timestamp
                nonceStr: data.data.nonceStr, // Required, generate random string of signature
                signature: data.data.signature,// Required, signature, see Appendix 1
                jsApiList: ['getLocation']  // Required, list of JS interfaces to be used, see Appendix 2 for list of all JS interfaces
            });
            wx.ready(function(){
                var longitude,latitude;
                wx.getLocation({
                    type: 'wgs84', // The default is the gps coordinate of wgs84. If you want to return the Mars coordinate directly to openLocation, you can enter 'gcj02'
                    success: function (res) {
                        //********Note: the latitude and longitude of the current position can be obtained here, and it can be transferred to the method requiring latitude and longitude********
                        latitude = res.latitude;
                        longitude = res.longitude;
                        //showMap(latitude,longitude);
                    },
                    cancel: function (res) {
                        //Unable to get geographic location
                        //Layer. Open ({content: "if you refuse to authorize the geographical location, you will not be able to obtain the nearest store site", time: 3});
                    },
                    fail: function (res) {
                        //Unable to get geographic location
                        //Layer. Open ({content: "failed to get geographic location", time: 3});
                    }
                });
            });
            wx.error(function(res){    //Wechat verification failed
                //Layer. Open ({content: "failed to get geographic location", time: 3});
            });
        }
    });
    //Wechat JS-SDK obtains the end of longitude and latitude of current position

For the usage of wechat JSSDK, please refer to http://blog.csdn.net/chenxueshanblog/article/details/78740931

Call Tencent map according to latitude and longitude

showMap(39.9244100000,116.5184500000);      //Suppose you want to display the map at this address as the center point

function showMap(latitude, longitude){
    var map = new qq.maps.Map(document.getElementById("mapBox"),{    //Map part initialization
        zoom: 15,               //Set map zoom level
        center: new qq.maps.LatLng(latitude, longitude),     //Set center point
        zoomControl: false,    //Do not enable scale control
        mapTypeControlOptions: {  //Set the map type of the control to normal street map
            mapTypeIds: qq.maps.MapTypeId.ROADMAP
        }
    });
    var info = new qq.maps.InfoWindow({ map: map });      //Add prompt window

    var result = { "code":0, "msg":"success", "data":[ {"id":1,"name":"5th shop","locate":"Intersection of Wuhe Avenue and Jihua Road, Bantian, Longgang District, Shenzhen City, Guangdong Province","latitude":"39.9254100000", "longitude":"116.5220000000"}, {"id":2,"name":"I'm the farthest","locate":"Beijing anti overheating contract and then he suddenly Beijing anti overheating contract and then he suddenly Beijing anti overheating contract and then he suddenly","latitude":"39.91800000", "longitude":"116.518000000"}, {"id":3,"name":"Nearest shop","locate":"Liaoning province contracts, and then he gets hot, and he gets hot","latitude":"39.9244100000", "longitude":"116.5174500000"}, {"id":4,"name":"4th shop","locate":"4th 4th 4th 4th 4th 4th 4th 4th 4th 4th 4th","latitude":"39.92600000", "longitude":"116.5194500000"}, {"id":5,"name":"The second nearest shop","locate":"5th 5th 5th 5th 5th 5th 5th 5th 5th 5th 5th 5th","latitude":"39.92300000", "longitude":"116.5200000000"}]};
    //The data in result is used to display the prompt information when marking, and marking Click
    if(result.code==0 && result.msg=="success"){
        for(var i=0; i<result.data.length; i++){
            var data = result.data[i];
            var marker = new qq.maps.Marker({ position: new qq.maps.LatLng(data.latitude, data.longitude), map: map });    //Create tag
            //***Store the necessary data into each corresponding marker object
            marker.id = data.id;
            marker.name = data.name;
            marker.locate = data.locate;
            qq.maps.event.addListener(marker, 'click', function() {    //Get tagged click events
                info.open();  //Click the mark to open the prompt window
                info.setContent('<div class="mapInfo"><p class="center">'+this.name+'</p><p>'+this.locate+'</p><button type="button" onclick="bindShop(\''+this.id+','+this.position.lat+','+this.position.lng+'\')">Bound stores</button></div>');  //***Set the content of the prompt window (the data saved in the marker object is used here)
                info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng));  //Prompt window position
            });
        }
    }else{
        //Layer. Open ({content: "failed to get nearby shops", skin: 'msg', time: 2});
    }
}

function bindShop(shopInfo){    //Functions executed after clicking the button on the map annotation prompt window
    alert(shopInfo);  //Passed string parameter containing id / longitude / latitude
}

Files to import:

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<!--<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>-->

HTML code:

<div class="mapBox">
    <div id="mapBox">
        <p id="mapInfo"></p>
    </div>
</div>

CSS code:

body { height:100vh; background: #fff; color: #3D3D3D; }
.mapBox { width: 100vw; font-size: 14px; height: 100vh; }
.mapBox > #mapInfo { padding: 20px; }
.mapBox > div { width: 100%; height: 100%; }
.mapBox > p { padding: 20px; }
.addShop { display: block; color: #fff; background: #00CC99; border: none; font-size: 14px; width: 50vw; margin: 0.4rem 0 0 25vw; padding: 0.32rem; border-radius: 0.8rem; }
.mapInfo > p.center { text-align: center; }
.mapInfo > p { line-height: 0.533333rem; }
.mapInfo > button { display: block; margin: 0.106667rem auto; color: #0c9; background: #fafafb; border: 1px solid #0c9; border-radius: 0.133333rem; padding: 0.15rem 0.3rem; }

design sketch

Extras: follow up needs to add: site search function

Tags: SDK JQuery JSON

Posted on Mon, 04 May 2020 07:07:34 -0700 by robert_a89