Rumah > applet WeChat > Pembangunan program mini > Analisis ringkas tentang cara memperkenalkan Amap ke dalam program mini

Analisis ringkas tentang cara memperkenalkan Amap ke dalam program mini

青灯夜游
Lepaskan: 2021-11-23 19:05:28
ke hadapan
10017 orang telah melayarinya

Bagaimana untuk memperkenalkan Amap ke dalam program mini? Artikel ini akan memperkenalkan kepada anda cara menggunakan Amap dalam applet WeChat saya harap ia akan membantu anda!

Analisis ringkas tentang cara memperkenalkan Amap ke dalam program mini

Dapatkan kunci pengguna AMAP

Jika anda tidak mempunyai kunci, anda perlu memohon dahulu dan masukkan platform pembangunan Amap lbs .amap.com/, terdapat langkah terperinci dalam Panduan Pembangunan-> Dapatkan kunci, dan anda boleh melihat kunci yang kami buat dalam Pengurusan Aplikasi-> [Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini]

Analisis ringkas tentang cara memperkenalkan Amap ke dalam program mini

Kita boleh merangkum kunci supaya kita tidak perlu mencarinya setiap masa. Dalam lib Cipta fail config.js baharu dalam folder

var config = {
  key: "你的key"
}
module.exports.config = config;
Salin selepas log masuk

Import js Gaode dan masukkan js untuk memanggil api peta Gaode

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

Dapatkan lokasi semasa

Buat contoh peta Gaode dan namakannya myAmapFun

var key = config.config.key;
var myAmapFun = new amapFile.AMapWX({
    key: key
});
Salin selepas log masuk

Panggil kaedah getRegeo

myAmapFun.getRegeo({
    success: (data) => {
        //保存位置的描述信息( longitude经度 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,
          // 给该经度纬度加上icon做标记,并调节大小
          markers: [{
            latitude: data[0].latitude,
            longitude: data[0].longitude,
            height: 30,
            width: 35,
            iconPath: '../../imgs/locationIcon/siteAnalisis ringkas tentang cara memperkenalkan Amap ke dalam program mini'
          }]
        })
      },
      fail: function(info){
        console.log("get Location fail");
      }    
    });
Salin selepas log masuk

Kita boleh melihat data yang berjaya dikeluarkan dan kita boleh menggunakan maklumat di dalamnya mengikut kami sendiri Anda perlu mengambil

Analisis ringkas tentang cara memperkenalkan Amap ke dalam program mini

untuk memaparkan peta dalam fail wxml Set lebar di sini ialah 100%, ketinggian ialah 400px, scale ialah. nisbah zum peta

<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>
Salin selepas log masuk

Titik tanda merah ialah data titik penanda biru dipaparkan oleh show-location="true", tetapi tiada pratonton peranti sebenar

Analisis ringkas tentang cara memperkenalkan Amap ke dalam program mini

Dapatkan mata berdekatan, hanya ambil sepuluh yang pertama

Analisis ringkas tentang cara memperkenalkan Amap ke dalam program mini

data: {
    # 当前位置经度
    longitude: "",
    # 当前位置纬度
    latitude: "",
    # 获取位置的标记信息
    markers: [],
    # 获取位置的位置信息
    poisdatas : [],
    # 简单展示信息使用的
    textData: {}
}
Salin selepas log masuk

Panggil antara muka getPoiAround Amap untuk mendapatkan maklumat berdekatan berdasarkan kata kunci

get_current_PoiAround(){
    var key = config.config.key;
    var myAmapFun = new amapFile.AMapWX({
      key: key
    });
    // getRegeo 获得当前位置信息(上面有用到过这个方法)
    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");
      }    
    });
    // 通过关键词获取附近的点
    myAmapFun.getPoiAround({
      // 改变icon图标的样式,点击前和点击后的我都暂时设成blue.svg, 如果不设置的话,默认就是一个红色的小图标
      iconPath: &#39;../../icon/keshan/blue.svg&#39;,
      iconPathSelected: &#39;../../icon/keshan/blue.svg&#39;,
      // 搜索的关键字(POI分类编码),在官方文档https://lbs.amap.com/api/javascript-api/download/ 可以下载查看
      querykeywords: &#39;购物&#39;,
      querytypes: &#39;060100&#39;,
      success: (data) => {
        const markers = data.markers;
        const poisdatas = data.poisData;
        let markers_new = []
        markers.forEach((item, index) => {
          // 只取10个点,超过就continue了,forEach是不能使用break和continue关键字的
          if( index >= 10 ){
            return;
          }
          // 将我们需要的markers数据重新整理一下存入markers_new中
          markers_new.push({
            id: item.id,
            width: item.width,
            height: item.height,
            iconPath: item.iconPath,
            latitude: item.latitude,
            longitude: item.longitude,
            // 自定义标记点上方的气泡窗口
            // display | &#39;BYCLICK&#39;:点击显示; &#39;ALWAYS&#39;:常显 |
            callout: {
              padding: 2,
              fontSize: 15,
              bgColor: "#f78063",
              color: &#39;#ffffff&#39;,
              borderRadius: 5,
              display: &#39;BYCLICK&#39;,
              content: poisdatas[index].name
            }
          })
        })
        //  将数据保存
        this.setData({
          markers: markers_new,
          poisdatas: poisdatas
        })
      },
      fail: function(info){
        wx.showModal({title:info.errMsg})
      }
    }) 
  },
Salin selepas log masuk

Panggil antara muka getPoiAround untuk mengembalikan hasil yang berjaya

Analisis ringkas tentang cara memperkenalkan Amap ke dalam program mini

Analisis ringkas tentang cara memperkenalkan Amap ke dalam program mini

bindmarkertap mengaktifkan acara klik ikon makertap dan menukar kandungan dalam 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>
Salin selepas log masuk

makertap mengaktifkan showMarkerInfo untuk memaparkan maklumat titik penanda, changeMarkerColor menukar warna titik penanda

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

Bukankah kita telah mengatakan bahawa poisdatas menyimpan maklumat lokasi daripada titik sebelumnya? Apabila kami mendapat ID, kami boleh mengeluarkannya dan menyimpannya dalam textData untuk paparan

 // 展示标记点信息
  showMarkerInfo(i) {
    const {poisdatas} = this.data;
    this.setData({
      textData: {
        name: poisdatas[i].name,
        desc: poisdatas[i].address,
        distance: poisdatas[i].distance
      }
    })
  },
Salin selepas log masuk

Jika ia adalah kedudukan yang diklik, gantikan iconPath dengan orange.svg, selebihnya. adalah blue.svg, dan tetapkan paparan gelembung yang diklik untuk dipaparkan ('SENTIASA'), dan tukar yang diubah suai Simpan semula data

// 改变标记点颜色
  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
    })
  },
Salin selepas log masuk

Analisis ringkas tentang cara memperkenalkan Amap ke dalam program mini

Untuk lebih banyak berkaitan pengaturcaraan pengetahuan, sila layari: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Analisis ringkas tentang cara memperkenalkan Amap ke dalam program mini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:juejin.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan