【微信公众号H5】腾讯地图的导入、定位、自定义标点与信息窗体

前言

模仿南京体彩网点地图功能做一个demo

准备工作

1、参考博客以及相关地址

【Uniapp 附项目】腾讯地图的导入、定位、自定义标点与信息窗体、区域绘制的使用：文档地址

2、注册腾讯位置服务账号

我们需要先在腾讯位置服务注册一个账号，以申请获取 key 等权限信息。

 腾讯位置服务：https://lbs.qq.com/

点击控制台后，点击应用管理创建新应用；

点击添加key，创建自己的key值，后面需要用到；

下面是最后生成的key:

导入以及使用

1、参考相关地址

腾讯地图官方文档：地址

2、导入地图

效果

     

代码

<template>
  <view class="content">
    <view class="wrapperBox">
      <view id="wrapper"></view>
    </view>
  </view>
</template>

<script>
let mapObj = null // 生成地图实例
// ------------------------------ 更新内容1 ----------------------------- //
// 创建多个标点
let wangDian1 = [] // 生成图标实例1
let wangDian2 = [] // 生成图标实例2
let wangDian3 = [] // 生成图标实例3
let wangDian4 = [] // 生成图标实例4
let wangDian5 = [] // 生成图标实例5

let marker = [] // 生成标点实例
// ---------------------------------------------------------------------- //
let infoWindow = null // 自定义信息窗体
let isShowText = false // 窗体是否打开

window.mapInit = function () {
  // 挂载地图实例
  mapObj = new TMap.Map('wrapper', {
    center: new TMap.LatLng(28.900484, 118.508882), // 地图初始坐标
    zoom: 14, // 缩放等级
    // mapStyleId: 'style1', // 地图样式
    // baseMap: {
    //   //设置底图样式
    //   type: 'vector', //设置底图为矢量底图
    //   features: [
    //     //设置矢量底图要素类型
    //     'base',
    //     'point',
    //   ],
    // },
    zoomControl: false, // 设置是否启用缩放控件
  })

  infoWindow = new TMap.InfoWindow({
    // 设置信息窗体
    map: mapObj, // 挂载的地图实例
    // enableCustom: false, // 是否自定义窗体
    // position: new TMap.LatLng(28.900484, 118.508882), // 初始标点坐标
    position: new TMap.LatLng(0, 0), // 初始标点坐标
    offset: {
      // 信息窗体的偏移量
      y: -30,
      x: 0,
    },
    // content: `<div style="width: 250px;height: 134px;padding:16px; background-color: white;"></div>`, // 必须设置一个底边的dom，否则会出现白边
  })

  mapObj.on('click', function (evt) {
    // 地图全局事件
    // mapObj.setCenter(
    //   new TMap.LatLng(evt.latLng.getLat().toFixed(6), evt.latLng.getLng().toFixed(6)),
    // )
    //设置infoWindow
    if (isShowText) {
      // 控制是否打开窗体
      isShowText = true
    } else {