微信小程序使用高德地图API,根据文本地址获取对应的经纬度信息

微信小程序使用高德地图API,根据文本地址获取对应的经纬度信息

一、申请key

进入高德开发者平台（https://lbs.amap.com/）
进入控制台–我的应用–申请微信小程序的key

二、下载微信小程序SDK

小程序插件下载地址：https://lbs.amap.com/api/wx/download
解压后得到：amap-wx.js 将其放入小程序的utils文件夹下

三、配置小程序服务器域名

进入小程序管理平台：https://mp.weixin.qq.com/
在开发管理中添加request合法域名

四、小程序wxml页面

使用小程序的

      <map style="width: 100vw;height: 30vh;" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" markers="{{markers}}" >

五、小程序js

首先引入下载好的amap-wx.js

var amapFile = require('../../../../utils/amap-wx')

初始化地图

  initAMap() {
    let address = '北京市海淀区'
    let myAmapFun = new amapFile.AMapWX({
      key: '3fb9d075cadc7740244c2e70b09f84d1'   //此处填入之前在高德上申请的key
    })
    let that = this
    //根据关键词，给出相应的提示信息
    myAmapFun.getInputtips({  
      keywords: address,
      success: function (data) {
      	//返回多个地址信息。（注意：看到这里就可以啦，接下来根据自己业务来做即可）
        console.log('success', data)
        
        //以下是我代码的逻辑：在地图上，为返回的第一个地址设置标记点
        //取第一个地址的信息
        let location = data.tips[0].location
        latitude = location.split(',')[1]
        longitude = location.split(',')[0]
		//在地图上，为第一个地址加标记点
        that.setMarker(latitude, longitude)
      },
      fail: function (fail) {
        console.log('err', fail)
      }
    })
  },
  
  //设置标记点
  setMarker(latitude, longitude) {
    let markers = []
    markers.push({
      id: 0,
      latitude: latitude,
      longitude: longitude,
      joinCluster: true,
      width: 26,
      height: 26,
      iconPath: '../../../static/workOrder/markerRot.png'//标记点的图标，此处自己设置
    })
    this.setData({
      //中心经纬度
      latitude,
      longitude,
      //标记点展示
      markers: markers
    })
  },

成果展示