您现在的位置是:网站首页>>微信>>微信小程序

微信小程序组件——地图

发布时间:2019-08-10 10:36:30作者:wangjian浏览量:92点赞量:0

    map组件

    属性说明参考:https://developers.weixin.qq.com/miniprogram/dev/component/map.html

    例:

    <!-- wxml -->
    <map id="map"
    longitude="113.324520" //中心点经度
    latitude="23.099994" //中心点纬度
    scale="14" //缩放级别
    markers="{{markers}}" //标记点
    bindmarkertap="markertap" //点击标记点事件
    bindregionchange="regionchange" //视野发生变化事件
    show-location //显示带有方向的当前定位点
    style="width: 100%; height: 300px;" //map组件样式
    >
    </map>
    //js
    Page({
    /**
      * 页面的初始数据
      */
    data: {
    //设置标记点
    markers: [
    {
    iconPath: "/images/dw.png",
    id: 0,
    latitude: 23.099994,
    longitude: 113.324520,
    width: 30,
    height: 30
    },
    {
    iconPath: "/images/ljx.png",
    id: 1,
    latitude: 23.099994,
    longitude: 113.313020,
    width: 30,
    height: 30
    },
    {
    iconPath: "/images/ljx.png",
    id: 2,
    latitude: 23.089994,
    longitude: 113.313020,
    width: 30,
    height: 30
    },
    {
    iconPath: "/images/ljx.png",
    id: 3,
    latitude: 23.099994,
    longitude: 113.343020,
    width: 30,
    height: 30
    },
    {
    iconPath: "/images/ljx.png",
    id: 4,
    latitude: 23.115994,
    longitude: 113.343020,
    width: 30,
    height: 30
    }
    ]
    },
    regionchange(e) {
    //视野发生变化时触发事件
    console.log(e)
    },
    markertap(e) {
    //点击标记点时触发事件
    console.log(e.markerId)
    },
    })

    根据如上代码可以现象如:

    image.png

0 +1