高德地图坐标拾取组件

最新推荐文章于 2021-11-12 13:49:57 发布

仰望星空的代码

最新推荐文章于 2021-11-12 13:49:57 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：各类地图接入使用实战文章标签：高德地图坐标拾取

交流qun：1061950566

本文链接：https://blog.csdn.net/wangzl1163/article/details/112679597

本文档介绍了一款基于高德地图v1.4.15的坐标拾取组件，详细阐述了组件的准备、功能及实现。组件支持输入地点提示、鼠标坐标显示和地图缩放等功能。

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

一、准备

该组件基于高德地图v1.4.15版实现，运行需要采用高德地图v1.4.15版及以上版本。

二、组件功能

（1）输入地点名称提示可选地点全称，选择后得到所选地点坐标。

（2）鼠标在地图上移动可实时展示鼠标所在位置坐标，点击后选中该点。

（3）支持地图缩放。

三、组件实现

// 高德坐标拾取 param point 位置展示 如'114.424314,30.606697' return getPoint 选择位置返回坐标字符串
<template>
  <div class="map-wrapper">
    <div :id="mapId" class="container">
      <div v-show="isShow" class="info">
        <input :id="tipId" type="text" placeholder="位置关键字" />
        <input v-model="point" type="text" />
        <input type="button" value="选择" @click="onPoint" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MapGetPoint',
  props: {
    mapKey: String,
    // 要加载的插件，同步加载，['AMap.Geocoder', ...]
    plugins: {
      type: Array,
      de