How to introduce Gaode map into the mini program? This article will introduce to you how to use Amap in the WeChat applet. I hope it will be helpful to you!

Obtain the Amap user key

If you don’t have a key, you need to apply first and enter the Amap development platformlbs.amap.com/, there are detailed steps in Development Guide-> Obtain key, and you can view the key we created in Console-> Application Management-> My Application. [Related learning recommendations: 小program development tutorial]

We can encapsulate the key so that we don’t have to look for it every time. In lib Create a new config.js file in the folder

var config = {
  key: "你的key"
}
module.exports.config = config;

Import the js and key of Amap in js to call the Amap map api

var amapFile = require('../../lib/amap-wx.130.js'); //高德js
var config = require('../../lib/config.js'); //引用我們的配置文件

Get the current location

Create a Gaode map instance and name it myAmapFun

var key = config.config.key;
var myAmapFun = new amapFile.AMapWX({
    key: key
});

Call the getRegeo method

myAmapFun.getRegeo({
    success: (data) => {
        //保存位置的描述信息（ longitude經(jīng)度 latitude緯度 和位置信息 ）
        let textData = {};
        textData.name = data[0].name;
        textData.desc = data[0].desc
        //將獲取的信息保存
        this.setData({
          textData: textData,
          longitude: data[0].longitude,
          latitude: data[0].latitude,
          // 給該經(jīng)度緯度加上icon做標(biāo)記，并調(diào)節(jié)大小
          markers: [{
            latitude: data[0].latitude,
            longitude: data[0].longitude,
            height: 30,
            width: 35,
            iconPath: '../../imgs/locationIcon/siteA brief analysis of how to introduce Amap into mini programs'
          }]
        })
      },
      fail: function(info){
        console.log("get Location fail");
      }    
    });

We can look at the successfully output data, and we can take the information according to our own needs

Display the map in the wxml file. The width is 100%, the height is 400px, scale is the zoom ratio of the map

<view class="map_container">
  <map class="map" name="" longitude="{{longitude}}" latitude="{{latitude}}" scale="16"  show-location="true" markers="{{markers}}">
  </map>
</view>
<view class="map_text">
  <text class="h1">{{textData.name}}</text>
  <text>{{textData.desc}}</text>
</view>

Red The marked points are the data of markers; the blue marked points are displayed with show-location="true", but there is no real device preview.

Get nearby points , only take the first ten

data: {
    # 當(dāng)前位置經(jīng)度
    longitude: "",
    # 當(dāng)前位置緯度
    latitude: "",
    # 獲取位置的標(biāo)記信息
    markers: [],
    # 獲取位置的位置信息
    poisdatas : [],
    # 簡單展示信息使用的
    textData: {}
}

Call the getPoiAround interface of Amap to obtain nearby information based on keywords

get_current_PoiAround(){
    var key = config.config.key;
    var myAmapFun = new amapFile.AMapWX({
      key: key
    });
    // getRegeo 獲得當(dāng)前位置信息（上面有用到過這個(gè)方法）
    myAmapFun.getRegeo({
      success: (data) => {
        let textData = {};
        textData.name = data[0].name;
        textData.desc = data[0].desc
        this.setData({
          textData: textData,
          longitude: data[0].longitude,
          latitude: data[0].latitude,
        })
      },
      fail: function(info){
        console.log("get Location fail");
      }    
    });
    // 通過關(guān)鍵詞獲取附近的點(diǎn)
    myAmapFun.getPoiAround({
      // 改變icon圖標(biāo)的樣式，點(diǎn)擊前和點(diǎn)擊后的我都暫時(shí)設(shè)成blue.svg， 如果不設(shè)置的話，默認(rèn)就是一個(gè)紅色的小圖標(biāo)
      iconPath: '../../icon/keshan/blue.svg',
      iconPathSelected: '../../icon/keshan/blue.svg',
      // 搜索的關(guān)鍵字（POI分類編碼），在官方文檔https://lbs.amap.com/api/javascript-api/download/ 可以下載查看
      querykeywords: '購物',
      querytypes: '060100',
      success: (data) => {
        const markers = data.markers;
        const poisdatas = data.poisData;
        let markers_new = []
        markers.forEach((item, index) => {
          // 只取10個(gè)點(diǎn)，超過就continue了，forEach是不能使用break和continue關(guān)鍵字的
          if( index >= 10 ){
            return;
          }
          // 將我們需要的markers數(shù)據(jù)重新整理一下存入markers_new中
          markers_new.push({
            id: item.id,
            width: item.width,
            height: item.height,
            iconPath: item.iconPath,
            latitude: item.latitude,
            longitude: item.longitude,
            // 自定義標(biāo)記點(diǎn)上方的氣泡窗口
            // display | 'BYCLICK':點(diǎn)擊顯示; 'ALWAYS':常顯 |
            callout: {
              padding: 2,
              fontSize: 15,
              bgColor: "#f78063",
              color: '#ffffff',
              borderRadius: 5,
              display: 'BYCLICK',
              content: poisdatas[index].name
            }
          })
        })
        //  將數(shù)據(jù)保存
        this.setData({
          markers: markers_new,
          poisdatas: poisdatas
        })
      },
      fail: function(info){
        wx.showModal({title:info.errMsg})
      }
    }) 
  },

Call the getPoiAround interface to return a successful result

bindmarkertap activates the makertap icon click event and changes the content in map_text

<view class="map_container">
  <map class="map" id="map" name="" longitude="{{longitude}}" latitude="{{latitude}}" scale="16"  show-location="true" markers="{{markers}}" bindmarkertap="makertap">
  </map>
  
</view>
<view class="map_text">
  <text class="h1">{{textData.name}}</text>
  <text wx:if="{{textData.distance != null}}">{{textData.distance}}m</text>
  <text>{{textData.desc}}</text>
</view>

makertap activates showMarkerInfo to display mark point information, changeMarkerColor Change the color of the marker point

makertap(e) {
    var id = e.detail.markerId;
    this.showMarkerInfo(id);
    this.changeMarkerColor(id);
},

Didn’t we say that poisdatas stores the location information of the point? Once we get the ID, we can take it out and save it in textData to display

 // 展示標(biāo)記點(diǎn)信息
  showMarkerInfo(i) {
    const {poisdatas} = this.data;
    this.setData({
      textData: {
        name: poisdatas[i].name,
        desc: poisdatas[i].address,
        distance: poisdatas[i].distance
      }
    })
  },

If it is the clicked position Just replace iconPath with orange.svg, and the rest are blue.svg, and set the clicked bubble display to display ('ALWAYS'), and then save the modified data again

// 改變標(biāo)記點(diǎn)顏色
  changeMarkerColor(index) {
    let {markers} = this.data;
    for (var i = 0; i < markers.length; i++) {
      if (i == index) {
        markers[i].iconPath = "../../icon/keshan/orange.svg"; 
        markers[i].callout.display = &#39;ALWAYS&#39;
      } else {
        markers[i].iconPath = "../../icon/keshan/blue.svg"; 
        markers[i].callout.display = &#39;BYCLICK&#39;
      }
    }
    this.setData({
      markers: markers
    })
  },

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of A brief analysis of how to introduce Amap into mini programs. For more information, please follow other related articles on the PHP Chinese website!