MapContext

解释：map 返回值。

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

图片示例

代码示例

-

  1. <view class="container">    <map id="myMap"         longitude="{{longitude}}"        latitude="{{latitude}}"        style="width: 100%"          markers="{{markers}}"        show-location>    </map>    <button type="primary" bindtap="getCenterLocation">获取位置</button>    <button type="primary" bindtap="moveToLocation">移动位置</button>    <button type="primary" bindtap="translateMarker">平移 marker</button>    <button type="primary" bindtap="includePoints">缩放视野展示所有经纬度</button>    <button type="primary" bindtap="getRegion">获取当前地图的视野范围</button>    <button type="primary" bindtap="getScale">获取当前地图的缩放级别</button></view>

-

  1.     data: {
  2.         latitude: 40.048828,
  3.         longitude: 116.280412,  
  4.         markers: [{
  5.             markerId: 1,
  6.             latitude: 40.052751,
  7.             longitude: 116.278796
  8.         }, {
  9.             markerId: 2,
  10.             latitude: 40.048828,
  11.             longitude: 116.280412,
  12.             callout: {
  13.                 display: 'ALWAYS',
  14.                 content: '百度科技园'
  15.             }
  16.         }] 
  17.     },
  18.     onReady() {
  19.         this.mapContext = swan.createMapContext('myMap');
  20.     },
  21.     getCenterLocation: function () {
  22.         this.mapContext.getCenterLocation({
  23.             success: function (res) {
  24.                 swan.showModal({
  25.                     title: '位置信息',
  26.                     content: (res.longitude).toFixed(2) + '/' + (res.latitude).toFixed(2)
  27.                 });
  28.                 console.log("经度", res.longitude);
  29.                 console.log("纬度", res.latitude);
  30.             }
  31.         })
  32.     },
  33.     moveToLocation: function () {
  34.         this.mapContext.moveToLocation();
  35.     },
  36.     translateMarker: function () {
  37.         this.mapContext.translateMarker({
  38.             markerId: '2',
  39.             destination: {
  40.                 latitude: 40.049655,
  41.                 longitude: 116.27505,
  42.             },
  43.             autoRotate: true,
  44.             rotate: 30,
  45.             duration: 1000,
  46.             animationEnd() {
  47.                 swan.showToast({
  48.                     title: '动画结束啦！',
  49.                     icon: 'none'
  50.                 });
  51.             },
  52.             success(res) {
  53.                 console.log('success', res)
  54.             },
  55.             fail (err) {
  56.                 console.log('fail', err)
  57.             }
  58.         })
  59.     },
  60.     includePoints: function () {
  61.         this.mapContext.includePoints({
  62.             padding: [10],
  63.             points: [{
  64.                 latitude: 23,
  65.                 longitude: 113.33,
  66.             }, {
  67.                 latitude: 23,
  68.                 longitude: 113.3345211,
  69.             }],
  70.             success: function (res) {
  71.                 console.log(res)
  72.             },
  73.             fail: function (err) {
  75.             }
  76.         })  
  77.     },
  78.     getRegion: function () {
  79.         this.mapContext.getRegion({
  80.             success: function (res) {
  81.                 swan.showModal({
  82.                     title: '视野范围',
  83.                     content: 'northeast: ' + JSON.stringify(
  84.                        res.northeast) + '/' + "southwest: " + JSON.stringify(res.southwest)
  85.                 });
  86.                 console.log("视野范围", res);
  87.             }
  88.         })
  89.     },
  90.     getScale: function () {
  91.         this.mapContext.getScale({
  92.             success: function (res) {
  93.                 swan.showModal({
  94.                     title: '缩放级别',
  95.                     content: JSON.stringify(res.scale)
  96.                 });
  97.             }
  98.         })       
  99.     }
  100. });