高德地图查询地址和获得点位

最新推荐文章于 2025-03-07 21:56:10 发布

咿口薄荷糖

最新推荐文章于 2025-03-07 21:56:10 发布

阅读量1.4k

点赞数

分类专栏： Amap 文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_43936040/article/details/110229133

版权

本文介绍了如何利用JavaScript和Vue.js结合高德地图API，进行地址查询和获取地理位置点位的操作。通过实例代码，详细解析了调用高德地图接口的过程，包括设置地图、搜索地址、定位用户位置等功能，帮助开发者实现地图应用中的关键功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="map-pop" @click.self="close">
    <div class="maxMap">
      <div class="search">
        <input type="text" :value="searchVal" placeholder="请输入内容按回车键搜索" @keyup.enter="mapInput"/>
        <div @click="okButten">确定</div>
        <div @click="close">取消</div>
      </div>
      <div id="maxMap" class="map"></div>
      <div class="input-card">
        <p>左击获取经纬度：</p>
        <div class="input-item">
          <input type="text" readonly="true" v-model="inputView">
        </div>
      </div>
    </div>
  </div>
</template>

<script> 
export default {
  name: "maxMap",
  props: ["value","longitude","latitude"],
  data() {
      return {
        inputView: '',
        mapObj:{},
        searchVal: '',
        lng:0,
        lat:0
      }
  },
  mounted() {
    this.$nextTick(() => {
      this.getMap();
    });
  },
  methods: {
    //地图初始化
    getMap() {
      var that = this
      let lo = 118.