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

Implementation example of go operation etcd

etcdIt is an open-source, distributed key value pair data storage system, which provides shared configuration, service registration and discovery. This paper mainly introduces the installation and use of etcd. Etcdetcd introduction etcdIt is an open source and highly available distributed key value storage system developed with go language, which can be used to configure sharing […]