Coordinate picker based on Vue + Tencent location service

Time:2021-7-17

demand

1. Search specific address, fill in longitude and latitude automatically, and mark on the map

Coordinate picker based on Vue + Tencent location service

2. Click a point on the map to fill in the longitude and latitude again and mark it

code

  • Creating a new div rendering map in DOM
< El form item label = "store address" prop = "address" >
  <el-input v-model="fristForm.address"></el-input>
  <el-input
    class="long-lat"
    v-model="fristForm.longitude"
    Placeholder = "longitude"
  ></el-input>
  <el-input
    class="long-lat"
    v-model="fristForm.latitude"
    Placeholder = "latitude"
  ></el-input>
  <el-button size="mini" type="primary" @click="searchKeyword"
    >Search < / El button
  >
</el-form-item>
< span class = "changeaddress" > click the map to change the location address of the branch</span>
<!--  Div container for rendering maps -- >
<div id="container" class="mapbox"></div>
  • JS defines map variables and sets requirements
var searchService,geocoder,map,markersArray = [];
<script>
export default {
    mounted() {
      this.init();
    },
    methods:{
        init() {
          var that = this;
          var center = new qq.maps.LatLng(39.916527, 116.397128);
          var map = new qq.maps.Map(document.getElementById("container"), {
            center: center,
            zoom: 13
          });
          var latlngBounds = new qq.maps.LatLngBounds();
          qq.maps.event.addListener(map, "click", function(event) {
            console.log(event);
            that.fristForm.longitude = event.latLng.getLng(); //  longitude
            that.fristForm.latitude = event.latLng.getLat(); //  latitude

            if (markersArray) {
              for (let i in markersArray) {
                markersArray[i].setMap(null);
              }
            }
            var marker = new qq.maps.Marker({
              map: map,
              position: event.latLng
            });
            markersArray.push(marker);
          });

          geocoder = new qq.maps.Geocoder({
            complete: function(result) {
              console.log(result);
              that.fristForm.longitude = result.detail.location.lng;
              that.fristForm.latitude = result.detail.location.lat;
              map.setCenter(result.detail.location);
              var marker = new qq.maps.Marker({
                map: map,
                position: result.detail.location
              });
              markersArray.push(marker);
            }
          });
        },
    },
    //Search address
    searchKeyword() {
      var keyword = this.fristForm.address;
      this.clearOverlays(markersArray);
      //Set the search scope according to the city you entered
      //Searchservice. Setlocation ("Beijing");
      //Search within the search scope according to the key words entered
      if (keyword) {
        // searchService.search(keyword);
        geocoder.getLocation(keyword);
      } else {
        Alert ("Please Enter address");
      }
    },
}
</script>

Document reference

The above code uses the jsapi function. At present, the corresponding function has been upgraded to JavaScript API GL, and the address resolution function can directly call the interface. Welcome to experience!

Address resolution (address to coordinate)

JavaScript API GL reference manual

Author: houqq

Link: https://segmentfault.com/a/11…

Source: segmentfault

The copyright belongs to the author. For commercial reprint, please contact the author for authorization. For non-commercial reprint, please indicate the source.

Recommended Today

"About operating page B to refresh data on page A"

Here is Zhuo, who is suddenly diligent, and continues to update the documentation. need &quot;Little Z, can you say that after adding a new piece of data on page A, page B is also refreshed synchronously, and the newly added data appears?&quot; PO said to me. &quot;Yes, yes, but…&quot; I was about to say. &quot;I […]