This is the 9th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Obtain amap user Key

If you do not apply for a key, you need to apply for it first. Enter Autonavi development platform lbs.amap.com/. There are detailed operation steps in the development guide -> Obtaining a Key, and you can view the key we created in the console -> Application Management -> My Application

We can wrap the key around it so we don’t have to find it every time. Create a new config.js file in the lib folder

var config = {
  key: "Your key"
}
module.exports.config = config;
Copy the code

In js import Autonavi JS and key can call the Amap API

var amapFile = require('.. /.. /lib/amap-wx.130.js'); / / Scott js
var config = require('.. /.. /lib/config.js'); // Reference our configuration file
Copy the code

Get the current position

🎈 Create an amap instance and name it myAmapFun

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

🎈 calls the getRegeo method

myAmapFun.getRegeo({
    success: (data) = >{🎈 saves the description of the location (longitude longitude latitude latitude and location information)let textData = {};
        textData.name = data[0].name;
        textData.desc = data[0].desc 🎈 Save the obtained informationthis.setData({
          textData: textData,
          longitude: data[0].longitude,
          latitude: data[0].latitude, 🎈 mark the longitude and latitude with icon and adjust the sizemarkers: [{
            latitude: data[0].latitude,
            longitude: data[0].longitude,
            height: 30.width: 35.iconPath: '.. /.. /imgs/locationIcon/site1.png'}]})},fail: function(info){
        console.log("get Location fail"); }});Copy the code

We can take a look at the successful output data, the information in which we can fetch according to our own needs

To display the map in WXML file, set the width to 100%, the height to 400px, and scale to the map’s scale

<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>
Copy the code

The red markers are markers of data; The blue dots are shown by show-location=”true”, but the real preview is missing

Get the nearby points, just take the first ten

Data: {# longitude longitude: ", # latitude: ", # markers: [], # poisdatas: [], # textData: {}}Copy the code

Call amap’s getPoiAround interface to get nearby information based on keywords

get_current_PoiAround(){
    var key = config.config.key;
    var myAmapFun = new amapFile.AMapWX({
      key: key }); 🎈 getRegeo get the current location information (used above) 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"); }}); 🎈 get the nearby point myamapfun.getPoiaround by keyword ({🎈 change the style of icon icon, click before and after I temporarily set blue. SVG, if not set, default is a small red iconiconPath: '.. /.. /icon/keshan/blue.svg'.iconPathSelected: '.. /.. /icon/keshan/blue.svg', 🎈 search by keyword (POI classification code) in official document HTTPS:/ / lbs.amap.com/api/javascript-api/download/ can download to see
      querykeywords: 'shopping'.querytypes: '060100'.success: (data) = > {
        const markers = data.markers;
        const poisdatas = data.poisData;
        let markers_new = []
        markers.forEach((item, index) = >{🎈 only10One point, beyond thatcontinueForEach is not availablebreakandcontinuekeywordif( index >= 10) {return; } 🎈 recompile the markers we need and save them to markers_new.push({id: item.id,
            width: item.width,
            height: item.height,
            iconPath: item.iconPath,
            latitude: item.latitude,
            longitude: the item. The longitude, 🎈 custom tag points at the top of the bubble window 🎈 display |'BYCLICK': Click display;'ALWAYS': often | the callout: {padding: 2.fontSize: 15.bgColor: "#f78063".color: '#ffffff'.borderRadius: 5.display: 'BYCLICK'.content: poisdatas[index].name}})}) 🎈 Saves datathis.setData({
          markers: markers_new,
          poisdatas: poisdatas
        })
      },
      fail: function(info){
        wx.showModal({title:info.errMsg})
      }
    }) 
  },
Copy the code

Calling the getPoiAround interface returns success

Bindmarkertap Activates the MakerTap icon click event to change the contents of 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>
Copy the code

Makertap activates showMarkerInfo to display tag information and changeMarkerColor to change the tag color

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

The id of this poisdatas will be stored in textData

 // Display the marker information
  showMarkerInfo(i) {
    const {poisdatas} = this.data;
    this.setData({
      textData: {
        name: poisdatas[i].name,
        desc: poisdatas[i].address,
        distance: poisdatas[i].distance
      }
    })
  },
Copy the code

Replace iconPath with orange.svg and blue. SVG for the rest, set the bubble display to display (‘ALWAYS’) and save the modified data

// Change the color of the marker
  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 = 'ALWAYS'
      } else {
        markers[i].iconPath = ".. /.. /icon/keshan/blue.svg"; 
        markers[i].callout.display = 'BYCLICK'}}this.setData({
      markers: markers
    })
  },
Copy the code