vue使用高德地圖根據(jù)坐標(biāo)定位點(diǎn)的代碼怎么寫

今天小編給大家分享一下vue使用高德地圖根據(jù)坐標(biāo)定位點(diǎn)的代碼怎么寫的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

代碼如下

<script>
var map,marker;
export default {
  data(){
    return{
      arriveCoor:[108.947025,34.2613255],//坐標(biāo)點(diǎn)
      arrive:"",//位置信息
    }
     
  },
  mounted() {   
    mapDraw(this.arriveCoor),
    mapCoor(this.arriveCoor)
  },
  methods:{
     mapDraw(arriveCoor){
     map = new AMap.Map('map-location', {  //map-location是嵌地圖div的id
       resizeEnable: true, //是否監(jiān)控地圖容器尺寸變化
       zoom:16, //初始化地圖層級(jí)
       center: arriveCoor //初始化地圖中心點(diǎn)
     });
     // 定位點(diǎn)
     this.addMarker(arriveCoor);
  },
  // 實(shí)例化點(diǎn)標(biāo)記
  addMarker(arriveCoor) {
    var _this = this;
    marker = new AMap.Marker({
      icon: "", //圖片ip
      imageSize: "20px",
      position: arriveCoor,
      offset: new AMap.Pixel(-13, -30),
      // 設(shè)置是否可以拖拽
      draggable: true,
      cursor: 'move',
      // 設(shè)置拖拽效果
      raiseOnDrag: true
    });
    marker.setMap(map);
  },
　 // 查詢坐標(biāo)
　 mapCoor(lnglatXY){
　　　　var _this = this;
　　　　AMap.service('AMap.Geocoder',function() {//回調(diào)函數(shù)
　　　　　　var geocoder = new AMap.Geocoder({});
　　　　　　geocoder.getAddress(lnglatXY, function (status, result) {
　　　　　　　　if (status === 'complete' && result.info === 'OK') {
　　　　　　　　　　//獲得了有效的地址信息:
　　　　　　　　　　_this.arrive = result.regeocode.formattedAddress;
　　　　　　　　else {
　　　　　　　　　　_this.arrive = "暫無(wú)位置";
　　　　　　　　}
　　　　　　});
　　　　})
　　},
}
</script>

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開發(fā)復(fù)雜的單頁(yè)應(yīng)用。

以上就是“vue使用高德地圖根據(jù)坐標(biāo)定位點(diǎn)的代碼怎么寫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。