小程序地图标点,h5腾讯地图标点,vue使用腾讯地图,腾讯地图自定义图标

很多项目都用到了腾讯地图,不管是小程序还是h5,记录一下使用过程!
1.先到腾讯地图官网点击注册注册登陆

准备工作

1. 先到腾讯地图官网点击注册注册登陆
2. 进入控制台申请key,根据自己的实际情况选择key值类型(到时候引入js的时候要用key)

h5端使用腾讯地图

使用地图标记点,自定义图标,添加事件

1. 官方文档在这里官方文档链接
2. 我是用vue开发的h5页面,现在vue的index.html 引入这两个js
   

 `   //这个是绘制地图js
  <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你自己申请的key"></script>
  //这个js用于获取用户的位置
    <script charset="utf-8" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>`

3. 现在就可以开始开发了 通过接口获取要在地图上标记的点和图标

#container {
  width: 100%;
  height: 100vh;
}

//绘制地图的div
<div id="container"></div>

getarea() {
      this.$axios
        .post(
          "自己的请求地址",
     		"自己要传的参数"
        )
        .then(res => {
        //接口请求成功
          if (res.data.code == 0) {
          /*
          我的数据长这样
          [{count: 4,
			iconPath: "http://nursing.newzow.com/php/public/marker/4_12020-12-26.png",//这个是要在地图上标记的图标(图标上有文字描述是后端生成的)
			id: 1,
			latitude: 29.55221,//经纬度
			longitude: 103.765388,//经纬度
			name: "市本级",}]
          */
            this.maplist= res.data.data;
            
            this.map();//获取到数据后在在渲染地图
          } 
        });
    },
    //绘制地图方法
map() {
      let _this = this;
      var map = new qq.maps.Map(document.getElementById("container"), {
        // 地图的中心地理坐标(我的项目只是眉山用所以固定写死了,这个经纬度可获取自己经纬度)
        center: new qq.maps.LatLng(29.55221, 103.76539),
        //初始化地图缩放级别
        zoom: 10
      });
      var marker;
      //循环获取回来的数据并标记点
      this.maplist.forEach((item, i) => {
        if(item.count<=0){
          return;
        }
        //标点
        marker = new qq.maps.Marker({
          position: new qq.maps.LatLng(item.latitude, item.longitude),
          map: map
        });
        // 添加图片
        var anchor = new qq.maps.Point(0, 39), //偏移量
          size = new qq.maps.Size(70, 80), //视口高宽
          origin = new qq.maps.Point(0, 0), //图片在视口位置
          scaleSize = new qq.maps.Size(70, 80),//设置图片大小
          markerIcon = new qq.maps.MarkerImage(
            item.iconPath,//图标路径
            size,
            origin,
            anchor,
            scaleSize
          );
        marker.setIcon(markerIcon);
        //添加点击事件
        qq.maps.event.addListener(marker, "click", () => {
        console.log(item);//可以获取到你点击的那一条数据做相应的事情
        });
      });
    },

4. 就完成了,代码就这些,腾讯地图所以东西都封装好了,我们只有调用api就可以了,很方便 这个是项目链接
   查看效果

小程序端使用腾讯地图

1. 小程序更多使用的是小程序自带的api,但是内核还是腾讯地图 如果要查看效果可以搜索(乐山养老)
2. 效果图长这样
3. 小程序开发文档路径(查看参数作用用法)点击查看
4. html

<map id="myMap" style="width: 100%; height: 100vh;" 
scale="8" //地图缩放级别
latitude="{{latitude}}"//经纬度用于控制地图中心位置
 longitude="{{longitude}}"经纬度用于控制地图中心位置
 markers="{{markers}}"//标记点
 bindmarkertap="spot" //点击标记点时触发
 show-location
 ></map>

data: {
    latitude: 29.552210,//中心点
    longitude: 103.765390,//中心点
    markers: [],//要标点的数据
  },
getregion(){
    wx.showLoading({
      title: '加载中...',
      mask: true,
    });
    wx.request({
      url: "你自己的请求地址",
      data: {
        自己的参数
      },
      method: "POST",
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
      success: (res) => {
        wx.hideLoading();
        if (res.data.code == 0) {
        /*
        我的数据长这样(后端数据最好这样,因为官方文档就这样定义的,就不用我们重新修改变量名了)
        [{count: 23,
		iconPath: "http://nursing.newzow.com/php/public/marker/23_22020-12-26.png",//图标
		id: 2,
		latitude: 29.582024,//标点经纬度
		longitude: 103.761261,//标点经纬度
		name: "市中区"}]
        */
          let list=res.data.data;
          let arr=[];
          list.forEach((item,index)=>{
            item.width=80;//这个后端数据没反,就自己设置图标大小
            item.height = 85;//这个后端数据没反,就自己设置图标大小
             arr.push(item)
          })
          this.setData({
            markers:arr,
          })
        } else {
          //错误提示
        }
      }
    })
  },
//点击事件获取id
  spot(e){
    let spotid = e.markerId;
 	console.log(e)
  },

5. 如果要在地图上写其他覆盖物,请用(其他的会被地图挡住)

<cover-view>
    <cover-image src=""></cover-image>
</cover-view>

点击注册注册登陆
如果能帮到你就好了,可以一键三连吗,感激不尽.一个赞也是学习的动力,一起加油吧 曾经的切图仔