
最终代码:
1 | < map :style = "[{width:mapWidth,height: mapHeight}]" :controls = "controls" :latitude = "latitude" :longitude = "longitude" :markers = "covers" @ tap = "getadd" @ controltap = "controltapfunc" @ regionchange = "regionchange" @ updated = "updatedmap" ></ map > |
2 | < text class = "maptext-tex" :style = "[{height: textheight,lineHeight:textheight}]" >{{address}}</ text > |
001 | export default { |
002 | data() { |
003 | return { |
004 | id: 0, // 使用 marker点击事件 需要填写id |
005 | mapWidth: "300rpx" , |
006 | mapHeight: "1000rpx" , |
007 | windowWidth: "" , |
008 | windowHeight: "" , |
009 | textwidth: "" , |
010 | textheight: "" , |
011 | title: 'map' , |
012 | latitude: '' , |
013 | longitude: '' , |
014 | covers: [], |
015 | controls:[{ //在地图上显示控件,控件不随着地图移动 |
016 | id:111, //控件id |
017 | iconPath: '../../static/image/dingwei.png' , //显示的图标 |
018 | position:{ //控件在地图的位置 |
019 | left:0, |
020 | top:0, |
021 | width:60, |
022 | height:60, |
023 | }, |
024 | clickable: true |
025 | }], |
026 | address: "" , |
027 | }; |
028 | }, |
029 | onLoad() { |
030 | this .getSystemInfo() |
031 | this .getlocation(); // |
032 | }, |
033 | onNavigationBarButtonTap(e) { |
034 | var that = this |
035 | uni.$emit( 'address' , { |
036 | address:that.address, |
037 | latitude:that.latitude, |
038 | longitude:that.longitude |
039 | }); |
040 | uni.navigateBack({ |
041 | delta:1 |
042 | }) |
043 | |
044 | }, |
045 | methods: { |
046 | updatedmap: function (){ |
047 | }, |
048 | regionchange: function (e){ |
049 | }, |
050 | controltapfunc: function (e){ |
051 | this .getlocation(); |
052 | }, |
053 | getSystemInfo: function (){ |
054 | var that = this |
055 | uni.getSystemInfo({ |
056 | success: function (res) { |
057 | that.windowWidth=res.windowWidth |
058 | that.windowHeight=res.windowHeight |
059 | that.mapWidth = that.windowWidth |
060 | that.mapHeight = that.windowHeight-80 |
061 | that.textwidth = that.windowWidth |
062 | that.textheight = that.windowHeight-that.mapHeight |
063 | that.controls = [{ //在地图上显示控件,控件不随着地图移动 |
064 | id:111, //控件id |
065 | iconPath: '../../static/image/dingwei.png' , //显示的图标 |
066 | position:{ //控件在地图的位置 |
067 | left:that.mapWidth-70, |
068 | top:that.mapHeight-70, |
069 | width:60, |
070 | height:60 |
071 | }, |
072 | clickable: true |
073 | }] |
074 | } |
075 | }); |
076 | }, |
077 | getadd: function (res) { |
078 | var that = this ; |
079 | that.latitude = res.detail.latitude |
080 | that.longitude = res.detail.longitude |
081 | that.covers = [ |
082 | { |
083 | latitude: res.detail.latitude, |
084 | longitude: res.detail.longitude, |
085 | iconPath: '../../static/image/biaoji.png' , |
086 | width:40, |
087 | height:40 |
088 | } |
089 | ] |
090 | that.$forceUpdate() |
091 | func.getLocation(res.detail.longitude,res.detail.latitude, function (result){ |
092 | that.address =result.data.result.formatted_addresses.recommend |
093 | }, function (err){ |
094 | }) |
095 | that.$forceUpdate(); |
096 | }, |
097 | //获取当前位置 |
098 | getlocation: function () { |
099 | var that = this ; |
100 | uni.getLocation({ |
101 | type: 'gcj02' , |
102 | success: function (res) { |
103 | that.latitude = res.latitude; |
104 | that.longitude = res.longitude; |
105 | that.covers = [ |
106 | { |
107 | latitude: res.latitude, |
108 | longitude: res.longitude, |
109 | iconPath: '../../static/image/biaoji.png' , |
110 | width:40, |
111 | height:40 |
112 | } |
113 | ] |
114 | //func.getLocation为封装的根据经纬度查询对应的地址的ajax方法 |
115 | func.getLocation(res.longitude,res.latitude, function (result){ |
116 | that.address = result.data.result.formatted_addresses.recommend |
117 | }, function (err){ |
118 | }) |
119 | that.$forceUpdate(); |
120 | }, |
121 | fail: function (ret){ |
122 | console.log(JSON.stringify(ret)); |
123 | } |
124 | }); |
125 | } |
126 | } |
127 | }; |
部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!