经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
小程序map学习:使用map获取当前位置并显示出来
来源:cnblogs  作者:林恒  时间:2020/11/16 10:25:07  对本文有异议

在小程序开发的过程中,我碰到过一个做map的需求,在我开发的时候我碰到了一些问题,这里总结出来,给大家一些解决方法。

简易小程序dome下载

代码片段分享:

js部分:

  1. var amapFile = require('../../libs/amap-wx.js');//如:..-/..-/libs/amap-wx.js
  2. Page({
  3. data: {
  4. markers: [],
  5. latitude: '',
  6. longitude: '',
  7. textData: {},
  8. dome:false
  9. },
  10. onLoad: function() {
  11. var that = this;
  12. wx.getLocation({
  13. type: 'wgs84',
  14. success: (res) => {
  15. console.log(res);
  16. that.setData({
  17. latitude: res.latitude,
  18. longitude: res.longitude
  19. })
  20. var marker = [{
  21. id: 1,
  22. latitude: res.latitude,
  23. longitude: res.longitude,
  24. iconPath: "../../images/marker.png",
  25. width: 22,
  26. height: 32,
  27. callout: {
  28. content: "你的位置\n换行内容",
  29. color: "#333333",
  30. fontSize: 13,
  31. borderRadius: 20,
  32. bgColor: "#ffffff",
  33. textAlign: "center" ,
  34. padding: 10,
  35. display: 'ALWAYS'
  36. }
  37. }]
  38. that.setData({
  39. markers: marker
  40. });
  41. that.setData({
  42. dome: true
  43. });
  44. },
  45. });
  46. },
  47. })

  

页面部分

  1. <view class="map_container">
  2. <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="11" markers="{{markers}}" wx:if="{{dome}}"></map>
  3. </view>

  

css部分

  1. .map_container{
  2. position: absolute;
  3. top: 0;
  4. bottom: 0;
  5. left: 0;
  6. right: 0;
  7. width:750rpx;
  8. height: 100vh;
  9. }
  10. map{
  11. width:100%;
  12. height: 100%;
  13. }

  

遇到的问题:看上面的代码,大家可以发现,我的map是用if来控制的,这样是为了防止markers动态更新后map没反应,这里我的解决方法是直接重构,如果有其他大家欢迎大家在下面分享出来。

原文链接:http://www.cnblogs.com/smileZAZ/p/13970550.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号