美文网首页
微信小程序地图标记点

微信小程序地图标记点

作者: 肉肉要次肉 | 来源:发表于2019-01-23 16:37 被阅读40次

项目中想要实现的效果是点击地图上的搜索框,输入想要搜索的公司名称,点击列表传给地图页,公司的经纬度以及相应的其他信息。在地图上显示该点及信息。

wxml代码示图:

先简单说一下:

标记1处:markers,就是今天的重点。有了它才能实现在地图的标记点

标记2处:将地图展示的高度设为了动态,根据是否显示标记点的公司名称来判断(这里标记点公司名称作为地图底部的弹窗来显示或隐藏,也就是截图中的<!-- 底部弹窗 -->)

标记3处:点击标记点时触发

WXSS代码示图:

js代码示图:

效果图:

相关文章

  • 微信小程序地图标记点

    项目中想要实现的效果是点击地图上的搜索框,输入想要搜索的公司名称,点击列表传给地图页,公司的经纬度以及相应的其他信...

  • 微信小程序添加外部地图服务数据

    先上效果: 缘起 使用微信小程序做地图相关功能的时候,有个需求是需要接入自己发布的地图服务。查看微信小程序地图组件...

  • 【总结】2017.01.09

    2017.01.09 - 计划 微信小程序尝试实现图形报表 熟悉小程序的几个地图API. 微信小程序仿365外勤-...

  • 微信集成高德地图

    微信小程序之:小程序接入高德地图SDK - 简书

  • 微信小程序canvas尺寸设置

    微信小程序尺寸设置可使用rpx来标记尺寸,类同rem可在微信小程序中自适应兼容换算不同的机型尺寸。但在小程序can...

  • 微信小程序头像标记

    WeChatminiprogram_addLogo 获取微信头像 并给自己的头像上加上logo 预览 页面主体 获...

  • 微信小程序之百度地图API

    最近给我的小程序增加了天气预报的功能,采用的是Baidu地图的小程序API。 百度地图微信小程序JavaScrip...

  • 微信小程序地图

    map标签 这时候可以看到一个充满屏幕的地图,可以根据鼠标选择位置 但是每次编译位置都是北京的位置 位置定位 使用...

  • 微信小程序地图

    小程序地图组件map 官方文档:https://developers.weixin.qq.com/miniprog...

  • 微信小程序开通腾讯地图服务

    在微信小程序中,每个腾讯位置服务应用对应一个微信小程序,所以需要为小程序开通服务,并且获取key值。 开通腾讯地图...

网友评论

      本文标题:微信小程序地图标记点

      本文链接:https://www.haomeiwen.com/subject/vbfsjqtx.html