Uniapp calls the map to query the location and mark the location

This week's meeting adds another small function , You need to pass the ID number / Check the mobile phone number on the map （ The background returns longitude and latitude ）, Mark position , It's troublesome to think , When doing it, I found that there was no technology , Share with you .

<map class="map" :longitude="longitude" :latitude="latitude" scale="16" :markers="markers" show-location="true"></map>

data() {
  return {
    longitude: "", //  Current position longitude 
    latitude: "", //  Current position latitude 
    markers: [], //  Get the tag information of the location 
  }
}

methods: {
  searchBtn(){
    let then = this;
    uni.getLocation({
      type: 'wgs84',
      geocode: true, // Set the parameter to true The longitude, latitude and city information can be obtained directly 
      success: function (res) {
        // res It will return the current longitude and latitude information , If you want to show the current location by default , The following longitude and latitude can be used directly res Value , If the default display location , Then customize the longitude and latitude ;
        then.longitude = '116.407526';
        then.latitude = '39.904030';
        then.markers = [
          {
            title: '',
            latitude: then.longitude,
            longitude: then.latitude,
            height: 100,
            width: 100,
            iconPath: 'http://cdn.duanqinghua.com/duanqinghua/img/55.jpg'
          }
        ]
      }
    });
  }
}

Then every time you query , Through the background interface , Get the corresponding longitude and latitude , Assign a value to longitude and latitude, Then the map will show the corresponding latitude and longitude area , If you want to show the positioning icon at the same time , Then give it in the way above markers assignment , Multiple positions can be marked .

（ After getting the data , You'd better not give it directly to markers assignment , First let Define a random assignment , then let Defined assignment markers, Otherwise, the marked points will not be displayed ）

Look at the address  uniapp Call up the map , Conduct location query , Mark positioning