小程序map学习:使用map获取当前位置并显示出来

前端开发 作者: 2024-08-26 06:15:01
在小程序开发的过程中,我碰到过一个做map的需求,在我开发的时候我碰到了一些问题,这里总结出来,给大家一些解决方法。 简易小程序dome下载 代码片段分享: js部分: var amapFile =
var amapFile = require('../../libs/amap-wx.js');//如:..­/..­/libs/amap-wx.js
Page({
  data: {
    markers: [],latitude: '',longitude: '',textData: {},dome:false
  },onLoad: function() {
    var that = this;
   
    wx.getLocation({
      type: 'wgs84',success: (res) => {
        console.log(res);
        that.setData({
          latitude: res.latitude,longitude: res.longitude
        })
        var marker = [{
          id: 1,latitude: res.latitude,longitude: res.longitude,iconPath: "../../images/marker.png",width: 22,height: 32,callout: {
            content: "你的位置\n换行内容",color: "#333333",fontSize: 13,borderRadius: 20,bgColor: "#ffffff",textAlign: "center",padding: 10,display: 'ALWAYS'
          }
        }]
        that.setData({
          markers: marker
        });
        that.setData({
          dome: true
        });
      },});
    
  },})
<view class="map_container">
  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="11" markers="{{markers}}" wx:if="{{dome}}"></map>  
</view>
.map_container{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width:750rpx;
  height: 100vh;
}
map{
  width:100%;
  height: 100%;
}
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_68819.html