腾讯地图的使用

1.ak名,ak

我的-android

UYMBZ-GFZ3G-GZOQX-IPVIH-IMQTF-EAFKD

2.public/index.html

3.使用的页面:

script:

mounted(){

  var qq = window.qq;

    var _this = this;

    var map = new qq.maps.Map(document.getElementById("container"), {

      center: new qq.maps.LatLng(37.80789920419703, 112.56275080159814), // 地图的中心地理坐标

      zoom: 18, // 地图缩放级别

      mapStyleId: "style1" // 该key绑定的style1对应于经典地图样式,若未绑定将弹出无权限提示窗

    });

    var geolocation = new qq.maps.Geolocation(

      "UYMBZ-GFZ3G-GZOQX-IPVIH-IMQTF-EAFKD", //ak,ak名

      "我的-android"

    );

    geolocation.getLocation(showPosition, () => {

      console.log("获取位置失败,如果是PC,请设置模拟器,Sensors,more tools>more");

    });

    function showPosition(position) { //成功后的回调

      console.log(position);

      var lnglat = new qq.maps.LatLng(position.lat, position.lng);

      map.setCenter(lnglat); //成功后根据经纬度设置中心点

      map.setZoom(10); //设置缩放级别

      var marker = new qq.maps.Marker({

        //设置Marker的位置坐标

        position: lnglat,

        //设置显示Marker的地图

        map: map

      });

      //设置Marker是否可以被拖拽,为true时可拖拽,false时不可拖拽,默认属性为false

      marker.setDraggable(true);

      //设置Marker停止拖动事件

      qq.maps.event.addListener(marker, "dragend", function() {

        var position = marker.getPosition();

        var zoom = map.getZoom();

        console.log(position, zoom);

        _this.$refs.j.value = position.lng; //分别把拖动后显示的位置赋值给经纬度,缩放级别

        _this.$refs.w.value = position.lat;

        _this.$refs.z.value = zoom;

        //https://lbs.qq.com/javascript_v2/doc/geocoder.html

        //地址和经纬度之间进行转换服务

        var geocoder = new qq.maps.Geocoder();

        //对指定经纬度进行解析

        geocoder.getAddress(position);

        //设置服务请求成功的回调函数

        geocoder.setComplete(function(result) {

          console.log(result.detail);      //拖动停止后返回的详细地址

        });


      });

    }

}

----------------------------------------------------------------

//只获取定位的情况下:

  var qq = window.qq;

    var _this = this;

    var geolocation = new qq.maps.Geolocation(

      "UYMBZ-GFZ3G-GZOQX-IPVIH-IMQTF-EAFKD", //ak,ak名

      "我的-android"

    );

    geolocation.getLocation((position)=>{

      _this.$refs.dw.innerHTML=position.city; //成功时赋值

    }, () => {

      console.log("获取位置失败,如果是PC,请设置模拟器,Sensors,more tools>more");


    });

--------------------------------------------------------------------

你可能感兴趣的:(腾讯地图的使用)