小程序地图引入使用

wxml文件

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

<view class="map_container">
  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="3" show-location="true" markers="{{markers}}" enable-satellite="{{satellite}}" circles="{{circles}}" bindmarkertap="makertap">
  </map>
  </view>

longitude latitude

这两个属性定位地图中心经纬度
####### scale
初始化缩放等级

markers

标注列表，具体详情字段官网上有

circles

在地图上画圆的标注列表
使用circle 属性

bindmarkertap

绑定标注点击事件返回 点击标注的对象

初始化地图

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
  var that = this;
    var myAmapFun = new amapFile.AMapWX({
      key: '自己申请的key',
      longitude: '116.397428',
      latitude: '39.90923',
      scale: 5,
      'enable-satellite': true,
    });
    that.setData({
      latitude: 39.90923
    });
    that.setData({
      longitude: 116.397428
    });
    // that.myAmapFun = myAmapFun;
    that.setData({
      myAmapFun: myAmapFun
    });

wxss样式

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
.map_container{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}