uni-app使用腾讯地图（二）

uni-app使用腾讯地图（一）

定位附近门店

代码如下（示例）：

// 两点间距离
distance(la1, lo1, la2, lo2) {
    var La1 = (la1 * Math.PI) / 180.0
    var La2 = (la2 * Math.PI) / 180.0
    var La3 = La1 - La2
    var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0
    var s =
        2 *
        Math.asin(
            Math.sqrt(
                Math.pow(Math.sin(La3 / 2), 2) +
                Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
            )
        )
    s = s * 6378.137 //地球半径
    s = Math.round(s * 10000) / 10000
    return s
},
// 计算最近的距离
nearDistance(array, centerLatitude, centerLongitude) {
    let temp = []
    for (let i = 0, l = array.length; i < l; i++) {
        const element = array[i]
        let d = this.distance(
            element.latitude,
            element.longitude,
            centerLatitude,
            centerLongitude
        )
        temp.push(d)
    }
    this.distanceL = Math.min.apply(null, temp)
}

效果如下图：

image

滑动轨迹

代码如下（示例）：

<map :polyline="polyline" :scale="scale" id="maps" :markers="markers" :latitude="center.latitude"
:longitude="center.longitude">
</map>

// 播放标记点
playMarkars() {
    if (this.polyline.length == 0) {
        uni.showModal({
            content: '当前时间范围内没有轨迹，无法播放！',
        })
        this.isPlay = false // 无
        this.playIndex = 0 // 第一个
        return
    }
    this.playIndex = Math.min(this.points.length - 1, this.playIndex)
    this.markers = [this.formatMarker(this.points[this.playIndex++], 'ALWAYS')]
    this.timer = setInterval(_ => {
        var i = this.playIndex++
        this.nextAdaress(i);
        if (i >= this.points.length) {
            clearInterval(this.timer)
            this.isPlay = false
            this.playIndex = 0
            this.initMarkers()
            return
        }
        this.markers = [this.formatMarker(this.points[i], 'ALWAYS')]
    }, 1000)
},

formatMarker(point, display = "BYCLICK") {
    let content = [
        "时间：" + parseTime(point.create_time),
        "运动状态：" + (point.sport == 1 ? '运动' : '静止'),
        "地址：" + point.address || ''
    ]
    return {
        id: point.id,
        iconPath: '/static/dada.png',
        width: 35,
        height: 35,
        latitude: point.latitude,
        longitude: point.longitude,
        callout: {
            display: display,
            padding: 10,
            borderRadius: 5,
            content: content.join("\n")
        }
    }
},
nextAdaress(index) {
    const len = 10;
    if (this.isGetAddress) {
        return
    }
    for (let i = 0; i < len; i++) {
        if (!this.points[i + index]) {
            break
        }
        if (this.points[i + index].address === undefined) {
            this.isGetAddress = true
            this.getAddress(i + index, len * 2, _ => {
                this.isGetAddress = false
            });
            break
        }
    }
},

图片效果如下：

image

vue接入腾讯地图接口

腾讯（推荐）

https://apis.map.qq.com/ws/location/v1/ip={$ip}&key={$key}

需要申请key，速度快，有基本信息

首页点击可以进行注册，申请一个获取key：

image

key管理，创建新密钥，填写相应信息即可

image 1.创建地图预览效果图如下：
image

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=申请的key"></script>

 <script type="text/javascript">
    function initMap() {
        var center = new TMap.LatLng(39.984104, 116.307503);
        //初始化地图
        var map = new TMap.Map("container", {
            rotation: 20,//设置地图旋转角度
            pitch:30, //设置俯仰角度（0~45）
            zoom:12,//设置地图缩放级别
            center: center//设置地图中心点坐标
        });
    }
</script>

2.地图加载完成效果图：

image

<script>
    function initMap() {
        //初始化地图
        var map = new TMap.Map("container", {
            center: new TMap.LatLng(39.984104, 116.307503)
        });
        //监听地图瓦片加载完成事件
        map.on("tilesloaded", function () {
            document.getElementById("tip").innerHTML = "地图瓦片已加载完成"
        })
    }
</script>

3.异步加载地图

<script>
        function initMap() {
            var map = new TMap.Map("container", {
                pitch: 45,
                zoom: 12,
                center: new TMap.LatLng(39.984104, 116.307503)
            });
        }
        function loadScript() {
            //创建script标签，并设置src属性添加到body中
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "https://map.qq.com/api/gljs?v=1.exp&key=申请key";
            document.body.appendChild(script);
        }
        window.onload = loadScript;
    </script>

4.同时加载两个地图效果图如下：

image

<script>
    function initMap() {
        //初始化地图一
        var mapOne = new TMap.Map("containerOne", {
            pitch:45,
            center: new TMap.LatLng(39.984104, 116.307503)
        });
        //初始化地图二
        var mapTwo = new TMap.Map("containerTwo", {
            center: new TMap.LatLng(39.984104, 116.307503)
        });
    }
</script>

5.获取地图中心效果如下图：

image

<script>
    var centerInfo = document.getElementById("center-info");

    var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
    //初始化地图
    var map = new TMap.Map("container", {
        center: center
    });
    //获取地图中心点事件
    function getCenter() {            
        var mapCenter = map.getCenter(); //获取地图中心点坐标
        centerInfo.innerHTML = "当前地图中心为: " + mapCenter.getLat().toFixed(6) + "," + mapCenter.getLng().toFixed(6);
    }
    //设置地图中心点事件
    function setCenter() {
        map.setCenter(new TMap.LatLng(39.908802,116.397502));//坐标为天安门
        centerInfo.innerHTML = "当前地图中心为: 39.908802,116.397502";
    }
</script>

6.地图平移效果图如下：

image

<script>
    function initMap() {
        var position = document.getElementById("position");
        var txt = document.getElementById("txt");
        var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
        //初始化地图
        var map = new TMap.Map("container", {
            center: center
        });
        location.innerHTML = map.getCenter().toString();
        //监听地图开始平移
        map.on("panstart", function () {
            txt.innerHTML = "地图开始平移"
        })
        //监听地图平移
        map.on("pan",function(){
            txt.innerHTML = "地图正在平移";
            position.innerHTML = map.getCenter().toString();//获取地图中心点
        })
        //监听地图平移结束
        map.on("panend",function(){
            txt.innerHTML = "地图结束平移";
        })
    }
</script>

3.vue接入腾讯地图

<template>
  <div>
    <div id="map" style="width:500px;height:500px;"></div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      longitude: "",
      latitude: ""
    };
  },
  
  methods: {
    init() {
      let address = "";
      let that = this;
      var center = new qq.maps.LatLng(34.754152, 113.667636);
      var map = new qq.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 13,
        disableDefaultUI: true
      });
      var marker = new qq.maps.Marker({
        position: center,
        map: map
      });
      var infoWin = new qq.maps.InfoWindow({
        map: map
      });
      var geocoder = new qq.maps.Geocoder({
        complete: function(res) {
          console.log(res);
          address = res.detail.nearPois[0].name;
        }
      });
      qq.maps.event.addListener(map, "click", function(event) {
        this.longitude = event.latLng.getLat();
        this.latitude = event.latLng.getLng();
        console.log(event);
        let lat = new qq.maps.LatLng(this.longitude, this.latitude);
        geocoder.getAddress(lat);
        setTimeout(() => {
          infoWin.open();
          infoWin.setContent(
            '<div style="text-align:center;white-space:nowrap;">' +
              address +
              "</div>"
          );
          infoWin.setPosition(event.latLng);
        }, 200);
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style scoped>
</style>

使用前需要在index.html里引入<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>才可以使用地图。

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
<template>
    <div>
        <div id="container" style="width:500px;height:500px;"></div>
    </div>
</template>

<script>
    export default{
        data() {
            return {
                longitude:39.956987, // 经度
                latitude:116.235128 // 纬度
            }
        },
        mounted () {
            this.init();
        },
        methods:{
            init() {
                var myLatlng = new qq.maps.LatLng(39.945687,116.3976968);
                var myOptions = {
                  zoom: 8,               // 设置地图缩放级别
                  center: myLatlng,      // 设置中心点样式
                  mapTypeId: qq.maps.MapTypeId.ROADMAP   
                }
                var map = new qq.maps.Map(document.getElementById("container"), myOptions);
            }
        }
    }
</script>

创建地图实例

var map=new qq.maps.Map(document.getElement('container'),{
center,//坐标，即最初显示的地图中心
zoom    //缩放级别，即显示的比例
}）

给地图添加事件

qq.maps.event.addListener(map,'click',function(res){
// res即点击后的位置信息
})

添加标记

var marker=new qq.maps.Marker({
position, // 标记点的位置，也可以是通过IP获取到的坐标
map, // 标记在哪个地图上
animation, // 标记显示时的动画效果
title, // 鼠标悬浮到标记上时的标题
draggable // 是否可拖拽
})

创建信息窗口

var info=new qq.maps.InfoWindow({
map, // 标记在哪个地图上
content // 信息窗口的内容
})

覆盖物

var polyline=new qq.maps.Polyline({
map, // 标记在哪个地图上
path, // 一个坐标数组，折线、多边形就是依靠这些坐标数组来成形的
strokeColor, // 折线颜色
strokeDashStyle, // 折线样式
strokeWeight, // 折线宽度
editable, // 折线是否可编辑
clickable // 是否可点击
})

单个标注点

在mounted生命周期或者从后台接口获得信息后调用初始化地图方法

initMap (latitude, longitude, message) {
    var center = new qq.maps.LatLng(latitude, longitude);
    var map = new qq.maps.Map(
        document.getElementById("container"),
        {
            center: center,
            zoom: 13
        }
    );

    var marker = new qq.maps.Marker({
        position: center,
        map: map
    });

    var info = new qq.maps.InfoWindow({
        map: map
    });
    
    // 悬浮标记显示信息
    qq.maps.event.addListener(marker, 'mouseover', function() {        
        info.open();
        info.setContent(`<div style="margin:10px;">${message}</div>`);
        info.setPosition(center);
    });
    qq.maps.event.addListener(marker, 'mouseout', function() {
        info.close();
    });
},

多个标注点

markers: [  ]; // 标记点数组

mounted () {
    this.initMap(this.markers)
},

initMap (arr) {
    // 默认以数组第一项为中心
    var center = new qq.maps.LatLng(arr[0].latitude, arr[0].longitude);
    
    var map = new qq.maps.Map(
        document.getElementById("container"),
        {
            center: center,
            zoom: 13
        }
    );
    
    // 提示窗
    var info = new qq.maps.InfoWindow({
        map: map
    });
    
    for (var i = 0; i < arr.length; i++) {
        var data = arr[i];

        var marker = new qq.maps.Marker({ 
            position: new qq.maps.LatLng(data.latitude, data.longitude), 
            map: map 
        });

        marker.id = data.id;
        marker.name = data.name;
        // 点击事件
        qq.maps.event.addListener(marker, 'mouseover', function() {
            info.open();
            // 设置提示窗内容
            info.setContent(`<div><p>${this.name}</p></div>`);
            // 提示窗位置 
            info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng));
        });
        qq.maps.event.addListener(marker, 'mouseout', function() {
            info.close();                    
        });
    }
}