小程序跳转腾讯地图+定位

腾讯地图文档

image.png image.png

html

    <view>
        <view class="p30">
            <view class="CommonTitle">地址查询</view>
            <view class="address">{{address}}</view>
        </view>
        <map class="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="15" markers="{{markers}}" bindtap="_BtnMap"></map>
    </view>

js

// pages/OtherPages/CustomerDetails/CustomerDetails.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        // 10月16日，标记图标
        markers: [{
            iconPath: "../../../statics/img/address.png",
            id: 0,
            latitude: [],
            longitude: [],
            width: 30,
            height: 30
        }],
        // 10月16日，地图需要的4个属性,经纬度、幼儿园名字，幼儿园的地址
        latitude: [],
        longitude: [],
        name: '彩虹蜗牛国际早教中心(泰福园)',  
        address: '北京市朝阳区三间房中街5号院泰福苑2区',
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        // 10月16日，腾讯地图，地址解析(地址转坐标)
        wx.request({
            url: 'https://apis.map.qq.com/ws/geocoder/v1',
            data: {
                address: this.data.address,
                key: 'PRVBZ-SXNKF-VWSJG-NOTTL-BW4D7-XBBQZ'
            },
            success: (res) => {
                // console.log(res.data.result.location.lat, res.data.result.location.lng)
                this.setData({
                    latitude: res.data.result.location.lat,
                    longitude: res.data.result.location.lng,
                    markers: [{
                        latitude: res.data.result.location.lat,
                        longitude: res.data.result.location.lng,
                    }]
                })
            },
        })
    },
    // 10月16日，点击跳转腾讯地图（显示的内容）
    _BtnMap() {
        wx.getLocation({
            type: 'gcj02',
            success: (res) => {
                // 使用微信内置地图，确定，公司经纬度，公司地址信息
                wx.openLocation({
                    latitude: this.data.latitude,
                    longitude: this.data.longitude,
                    name: this.data.name,
                    address: this.data.address,
                })
            },
        })
    },
})