9.微信小程序之地图小结

分手后的思念是犯贱 2022-05-11 11:34 248阅读 0赞

今天把地图资源的页面做完了，来回忆回忆一些坑。

首先，使用组件<map></map>就可以引用腾讯地图了，没错，就是辣么简单。

<map>组件中有许多的属性、方法。如果你想在地图标记某些位置，不妨使用“markers”标记点进行标记，可以自定义标记点的图标样式，还可以显示气泡，或者点击图标时显示气泡。

![70][]

粉红色的框是callout气泡，可以选择点击的时候出现或者总是出现；红色的是label，它们都是markers中的。目前我所了解在callout中无法添加图片，只能是字符串。

代码

1.map.wxml

2.map.wxss

Page({
      data: {
        markers:[
          {
            iconPath: '../../../image/car.png',
            id: 1,
            longitude: 108.31733,
            latitude: 22.83788,
            width: 30,
            height: 40,
            callout: {
              content:'我是点击气泡哈哈',
              color: "#000000",
              fontSize: 16,
              borderRadius: 10,
              bgColor: "#ffffff",
              padding: 20,
              display: "BYCLICK"
            },
            label: {
              content: '我是标记',
              color: '#ff0000',
              fontSize: 14,
              borderRadius: 10,
              bgColor: "#ffffff",
              padding: 5
    
            }
          },
         
        ],
        
      },
    
    markertap(){},
    
    })

未完，待续。。

下班了

# 啊哈哈哈， 我又回来了 #

时间：晚上九点。每次下班回到家弄完杂七杂八的东西后都是九点，看看之前写的内容，发现跟不上思路了╮(╯▽╰)╭

算了，那就记录记录现在想到的东西

**注意：markers必须是数组，是对象的话不起作用**

wx.request({
              url: app.url + '接口略',
              data: {
                lag: res.latitude,
                lng: res.longitude,
              },
              method: 'GET',
              success: function (res) {
                console.log(res.data.data);
                var array = res.data.data;
                var list = [];
                for (var i = 0; i < array.length; i++) {
                  //从接口取出来的是字符串，要变成数字
                  var lat = Number(array[i].school_latlng[0]);
                  var lon = Number(array[i].school_latlng[1]);
                  list[i] = {
                    iconPath: '../../../image/car.png',
                    id: array[i].id,
                    longitude: lon,
                    latitude: lat,
                    width: 30,
                    height: 40,
                    callout: {
                      content:array[i].school_name,
                      color: "#000000",
                      fontSize: 16,
                      borderRadius: 10,
                      bgColor: "#ffffff",
                      padding: 20,
                      display: "BYCLICK"
                    },
                    label:{
                      content:array[i].school_name,
                      color:'#ff0000',
                      fontSize:14,
                      borderRadius:10,
                      bgColor:"#ffffff",
                      padding:5
    
                    }
                  }
                }
    
                that.setData({
                  markers: list
                })
    
                console.log(that.data.markers);
              }
    
            })

# 由于markers中的气泡不支持图片显示，故弃用。使用"cover-view"来替代callout做弹出 #

cover-view是覆盖在原生组件之上的文本视图，可覆盖的原生组件包括`map`、`video`、`canvas`、`camera`、`live-player`、`live-pusher`，只支持嵌套`cover-view`、`cover-image`，可在`cover-view`中使用`button`

<map markers="{
       {markers}}" bindmarkertap="markertap">
        <cover-view wx:if="{
       {showModal}}">
            <cover-view>我是气泡弹出啊哈哈哈~</cover-view>
            <cover-image src=""><cover-image>
        </cover-view>
    </map>

在map中使用cover-view，结合markers绑定的函数bindmarkertap，点击标记点时触发，会返回marker的id，即可做出气泡弹出。

对了，还有一个坑。markers中的 iconPath文档上说是支持网络图片，但是你需要通过wx.downloadFile接口下载得到临时地址，也就是每个图片都需要download，太消耗性能了。故不推荐在iconPath时使用网络图片，而是使用本地图片。那么问题就来了，如果想给每个位置自定义不一样的图标样式怎么办？对不起，办不到，改需求，谢谢~

![70 1][]

\-------------分割线--------------------------------------------

当我写完，想看看代码还有什么值得补充的时候，电脑重启了

微笑.jpg  于是我凭借记忆又写了一遍，

微信开发者工具超级喜欢和我的笔记本起冲突造成重启，破编辑器

[70]: /images/20220505/e9c7a2f53fef4ac29f9125172030647a.png
[70 1]: /images/20220505/d08ed9db6ec945beaabc89b417994264.png