QinJs 官网 | QinJs 官网

qin.createMapContext(mapId,this)

创建并返回 map 上下文 mapContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <map> 组件。

平台差异说明

H5	微信小程序	小红书小程序	抖音小程序	快手小程序
√	√	√	√	√

mapContext 通过 mapId 跟一个 <map> 组件绑定，通过它可以操作对应的 <map> 组件。

mapContext 对象的方法列表

方法	参数	说明	平台差异说明
getCenterLocation	OBJECT	获取当前地图中心的经纬度，返回的是 gcj02 坐标系，可以用于 qin.openLocation
moveToLocation	OBJECT	将地图中心移动到当前定位点，需要配合 map 组件的 show-location 使用
translateMarker	OBJECT	平移 marker ，带动画	微信小程序带动画、抖音
includePoints	OBJECT	缩放视野展示所有经纬度	微信、抖音、快手
getRegion	OBJECT	获取当前地图的视野范围
getRotate	OBJECT	获取当前地图的旋转角	微信、抖音
getScale	OBJECT	获取当前地图的缩放级别
getSkew	OBJECT	获取当前地图的倾斜角	微信、抖音
addCustomLayer	OBJECT	添加个性化图层	微信小程序
addGroundOverlay	OBJECT	创建自定义图片图层，图片会随着地图缩放而缩放	微信、抖音小程序
addMarkers	OBJECT	添加 marker	微信小程序
fromScreenLocation	OBJECT	获取屏幕上的点对应的经纬度，坐标原点为地图左上角	微信小程序
initMarkerCluster	OBJECT	初始化点聚合的配置，未调用时采用默认配置	微信小程序
moveAlong	OBJECT	沿指定路径移动 marker，用于轨迹回放等场景。动画完成时触发回调事件，若动画进行中，对同一 marker 再次调用 moveAlong 方法，前一次的动画将被打断。支持 android，不支持 autoRotate 属性设置，默认为 ture	微信、抖音小程序
openMapApp	OBJECT	拉起地图APP选择导航。	微信、抖音、快手小程序
removeCustomLayer	OBJECT	移除个性化图层	微信小程序
removeGroundOverlay	OBJECT	移除自定义图片图层	微信小程序
removeMarkers	OBJECT	移除 marker。	微信小程序
setCenterOffset	OBJECT	设置地图中心点偏移，向后向下为增长，屏幕比例范围 0.25~0.75 ，默认偏移为 `[0.5, 0.5]`	微信、抖音小程序
toScreenLocation	OBJECT	获取经纬度对应的屏幕坐标，坐标原点为地图左上角。	微信小程序
updateGroundOverlay	OBJECT	更新自定义图片图层。	微信、抖音小程序
on	Method	监听地图事件。	微信小程序

getCenterLocation 的 OBJECT 参数列表

参数	类型	必填	说明
success	Function	否	接口调用成功的回调函数， `res = { longitude: "经度", latitude: "纬度"}`
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

moveToLocation 的 OBJECT 参数列表

参数	类型	必填	说明
longitude	Number	否	经度，H5、仅微信小程序 2.8.0+ 支持
latitude	Number	否	纬度，H5、仅微信小程序 2.8.0+ 支持
success	Function	否	接口调用成功的回调函数， `res = { longitude: "经度", latitude: "纬度"}`
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

translateMarker 的 OBJECT 参数列表

参数	类型	必填	说明
markerId	Number	是	指定 marker
destination	Object	是	指定 marker 移动到的目标点
autoRotate	Boolean	是	移动过程中是否自动旋转 marker
rotate	Number	是	marker 的旋转角度
moveWithRotate	Boolean	否	平移和旋转同时进行，默认值 false（仅微信小程序2.13.0支持）
duration	Number	否	动画持续时长，默认值 1000ms ，平移与旋转分别计算
animationEnd	Function	否	动画结束回调函数
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

includePoints 的 OBJECT 参数列表

参数	类型	必填	说明
points	Array	是	要显示在可视区域内的坐标点列表， `[{latitude, longitude}]`
padding	Array	否	坐标点形成的矩形边缘到地图边缘的距离，单位像素。格式为 `[上，右，下，左]` ，安卓上只能识别数组第一项，上下左右的 padding 一致。开发者工具暂不支持padding参数。
success	Function	否	接口调用成功的回调函数（支付宝小程序不支持）
fail	Function	否	接口调用失败的回调函数（支付宝小程序不支持）
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）（支付宝小程序不支持）

getRegion 的 OBJECT 参数列表

参数	类型	必填	说明
success	Function	否	接口调用成功的回调函数， `res = {southwest, northeast}` ，西南角与东北角的经纬度
fail	Function	否	接口调用失败的回调函数（支付宝小程序不支持）
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）（支付宝小程序不支持）

getRotate 的 OBJECT 参数列表

参数	类型	必填	说明
success	Function	否	接口调用成功的回调函数， `res = {rotate}` ，旋转角
fail	Function	否	接口调用失败的回调函数（支付宝小程序不支持）
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）（支付宝小程序不支持）

getScale 的 OBJECT 参数列表

参数	类型	必填	说明
success	Function	否	接口调用成功的回调函数， `res = {scale}` ，缩放值
fail	Function	否	接口调用失败的回调函数（支付宝小程序不支持）
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）（支付宝小程序不支持）

getSkew 的 OBJECT 参数列表

参数	类型	必填	说明
success	Function	否	接口调用成功的回调函数，`res = {skew}` ，倾斜角
fail	Function	否	接口调用失败的回调函数（支付宝小程序不支持）
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）（支付宝小程序不支持）

addCustomLayer 的 OBJECT 参数列表

属性	类型	必填	说明
layerId	string	是	个性化图层id
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

addGroundOverlay 的 OBJECT 参数列表

属性	类型	默认值	必填	说明
id	String		是	图片图层 id
src	String		是	图片路径，支持网络图片、临时路径、代码包路径
bounds	Object		是	图片覆盖的经纬度范围
visible	Boolean	true	否	是否可见
zIndex	Number	1	否	图层绘制顺序
opacity	Number	1	否	图层透明度
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.bounds 的结构

属性	类型	默认值	必填	说明
southwest	Object		是	西南角经纬度
northeast	Object		是	东北角经纬度

southwest 的结构

属性	类型	默认值	必填	说明
longitude	number		是	经度
latitude	number		是	纬度

northeast 的结构

属性	类型	默认值	必填	说明
longitude	number		是	经度
latitude	number		是	纬度

addMarkers 的 OBJECT 参数列表

属性	类型	默认值	必填	说明
markers	Array		是	同传入 map 组件的 marker 属性
clear	boolean	false	否	是否先清空地图上所有 marker
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

removeMarkers 的 OBJECT 参数列表

属性	类型	必填	说明
markerIds	Array	是	要被删除的 marker 的 id 属性组成的数组
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

moveAlong 的 OBJECT 参数列表

属性	类型	默认值	必填	说明
markerId	Number		是	指定 marker
path	Array		是	移动路径的坐标串，坐标点格式 `{longitude, latitude}`
autoRotate	boolean	true	否	根据路径方向自动改变 marker 的旋转角度
duration	number		是	平滑移动的时间
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

openMapApp 的 OBJECT 参数列表

属性	类型	必填	说明
longitude	Number	是	目的地经度
latitude	Number	是	目的地纬度
destination	String	是	目的地名称
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

setLocMarkerIcon 的 OBJECT 参数列表@setLocMarkerIcon

属性	类型	必填	说明
iconPath	string	否	图标路径，支持网络路径、本地路径、代码包路径
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

mapContext （App平台地图服务商差异）

属性	说明	高德是否支持	google地图是否支持
setLocMarkerIcon	设置定位点图标，支持网络路径、本地路径、代码包路径	已支持	不支持
moveAlong	沿指定路径移动 marker，用于轨迹回放等场景	已支持（不支持 autoRotate 属性）	已支持
addCustomLayer	添加个性化图层	不支持	不支持
removeVisualLayer	移除可视化图层	不支持	不支持
fromScreenLocation	获取屏幕上的点对应的经纬度，坐标原点为地图左上角	不支持	不支持
removeCustomLayer	移除个性化图层	不支持	不支持
setCenterOffset	设置地图中心点偏移，向后向下为增长，屏幕比例范围(0.25~0.75)	不支持	不支持
toScreenLocation	获取经纬度对应的屏幕坐标，坐标原点为地图左上角。	不支持	不支持

MapContext.on() (微信小程序支持)

markerClusterCreate 缩放或拖动导致新的聚合簇产生时触发，仅返回新创建的聚合簇信息。

返回参数

参数	类型	说明
clusters	Array<ClusterInfo>	聚合簇数据

markerClusterClick 聚合簇的点击事件。

返回参数

参数	类型	说明
cluster	ClusterInfo	聚合簇

ClusterInfo 结构

参数	类型	说明
clusterId	Number	聚合簇的 id
center	LatLng	聚合簇的坐标
markerIds	Array<Number>	该聚合簇内的点标记数据数组

initMarkerCluster(OBJECT) 结构

属性	类型	默认值	必填	说明
enableDefaultStyle	boolean	true	否	启用默认的聚合样式
zoomOnClick	boolean	true	否	点击已经聚合的标记点时是否实现聚合分离
gridSize	boolean	60	否	聚合算法的可聚合距离，即距离小于该值的点会聚合至一起，以像素为单位
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

  MapContext.on('markerClusterCreate', (theRes) => {});
  MapContext.on('markerClusterClick', (theRes) => {});

  MapContext.on('markerClusterCreate', (theRes) => {});
  MapContext.on('markerClusterClick', (theRes) => {});

地图聚合 API 示例(vue)

缩小地图可看到多个 marker 合并为 1 个并显示聚合数量，放大地图后恢复

VueScriptStyle

vue

<template>
  <view class="content">
    <map
      id="map"
      class="map"
      :show-location="true"
      :latitude="latitude"
      :longitude="longitude"
    />
  </view>
</template>

<template>
  <view class="content">
    <map
      id="map"
      class="map"
      :show-location="true"
      :latitude="latitude"
      :longitude="longitude"
    />
  </view>
</template>

<script>
  const img = '/static/logo.png';

  export default {
    data() {
      return {
        latitude: 23.099994,
        longitude: 113.324520,
      }
    },
    onReady() {
      this._mapContext = qin.createMapContext("map", this);

      // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
      this._mapContext.initMarkerCluster({
        enableDefaultStyle: false,
        zoomOnClick: true,
        gridSize: 60,
        complete(res) {
          console.log('initMarkerCluster', res)
        }
      });

      this._mapContext.on("markerClusterCreate", (e) => {
        console.log("markerClusterCreate", e);
      });

      this.addMarkers();
    },
    methods: {
      addMarkers() {
        const positions = [
          {
            latitude: 23.099994,
            longitude: 113.324520,
          }, {
            latitude: 23.099994,
            longitude: 113.322520,
          }, {
            latitude: 23.099994,
            longitude: 113.326520,
          }, {
            latitude: 23.096994,
            longitude: 113.329520,
          }
        ]

        const markers = []

        positions.forEach((p, i) => {
          console.log(i)
          markers.push(
            Object.assign({},{
              id: i + 1,
              iconPath: img,
              width: 50,
              height: 50,
              joinCluster: true, // 指定了该参数才会参与聚合
              label: {
                  width: 50,
                  height: 30,
                  borderWidth: 1,
                  borderRadius: 10,
                  bgColor: '#ffffff',
                  content: `label ${i + 1}`
              }
            },p)
          )
        })
        this._mapContext.addMarkers({
            markers,
            clear: false,
            complete(res) {
              console.log('addMarkers', res)
            }
        })
      }
    }
  }
</script>

<script>
  const img = '/static/logo.png';

  export default {
    data() {
      return {
        latitude: 23.099994,
        longitude: 113.324520,
      }
    },
    onReady() {
      this._mapContext = qin.createMapContext("map", this);

      // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
      this._mapContext.initMarkerCluster({
        enableDefaultStyle: false,
        zoomOnClick: true,
        gridSize: 60,
        complete(res) {
          console.log('initMarkerCluster', res)
        }
      });

      this._mapContext.on("markerClusterCreate", (e) => {
        console.log("markerClusterCreate", e);
      });

      this.addMarkers();
    },
    methods: {
      addMarkers() {
        const positions = [
          {
            latitude: 23.099994,
            longitude: 113.324520,
          }, {
            latitude: 23.099994,
            longitude: 113.322520,
          }, {
            latitude: 23.099994,
            longitude: 113.326520,
          }, {
            latitude: 23.096994,
            longitude: 113.329520,
          }
        ]

        const markers = []

        positions.forEach((p, i) => {
          console.log(i)
          markers.push(
            Object.assign({},{
              id: i + 1,
              iconPath: img,
              width: 50,
              height: 50,
              joinCluster: true, // 指定了该参数才会参与聚合
              label: {
                  width: 50,
                  height: 30,
                  borderWidth: 1,
                  borderRadius: 10,
                  bgColor: '#ffffff',
                  content: `label ${i + 1}`
              }
            },p)
          )
        })
        this._mapContext.addMarkers({
            markers,
            clear: false,
            complete(res) {
              console.log('addMarkers', res)
            }
        })
      }
    }
  }
</script>

css

<style>
  .content {
    flex: 1;
  }

  .map {
    flex: 1;
  }
</style>

<style>
  .content {
    flex: 1;
  }

  .map {
    flex: 1;
  }
</style>

三方定位和地图服务收费说明

使用三方定位或者地图服务，需向服务提供商（如：高德地图、百度地图、腾讯地图、谷歌地图）申请商业授权和缴纳费用（5万/年）。

qin.createMapContext(mapId,this) ​

三方定位和地图服务收费说明 ​

qin.createMapContext(mapId,this)

三方定位和地图服务收费说明