基于高德地图JS API实现Vue地图选点组件

于 2024-03-15 11:08:45 发布
阅读量1.1k 收藏 25
点赞数 28
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39410252/article/details/136732245
版权

基于高德地图JS API2.0实现一个搜索选择地点后返回给父组件位置信息的功能，同时可以进行回显

目录

1 创建key和秘钥

1.1 登录高德地图开放平台

打开开放平台地址

注册账号 或 申请账号

1.2 创建应用

在这里插入图片描述

1.3 绑定服务创建秘钥

在这里插入图片描述

在这里插入图片描述

2 使用组件前准备

2.1 导入loader

推荐pnpm

pnpm i @amap/amap-jsapi-loader -D

2.2 在对应的组件设置秘钥

<script type="text/javascript" lang="ts">
window._AMapSecurityConfig = {
  securityJsCode: "安全秘钥"
};
</script>

2.3 引入css样式

<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />

3 功能实现

3.1 初始化地图

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { Search } from "@element-plus/icons-vue";

let map = null;
let aMap = null;
onMounted(() => {
  AMapLoader.load({
    key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.PlaceSearch", "AMap.AutoComplete"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then(AMap => {
    // 第一参数是对应的div的id
    map = new AMap.Map("container", {
      // 设置地图容器id
      viewMode: "3D", // 是否为3D地图模式
      zoom: 11, // 初始化地图级别
      center: [116.397428, 39.90923] // 初始化地图中心点位置
    });
    aMap = AMap;
  });
});
onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div id="map-box">
    <div id="container" />
    
  </div>
</template>

<style scoped>
#map-box {
  width: 100%;
  height: 450px;
  position: relative;
}
#container {
  width: 100%;
  height: 100%;
}

#myPageTop {
  position: absolute;
  top: 5px;
  right: 10px;
  font-family: "Microsoft Yahei", Pinghei;
  font-size: 14px;
  background: none 0px 0px repeat scroll rgb(255, 255, 255);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(204, 204, 204);
  border-image: initial;
  margin: 10px auto;
  padding: 6px;
}
#panel {
  background-color: white;
  max-height: 400px;
  overflow-y: auto;
}
</style>

3.2 增加搜索功能

function search() {
  const placeSearch = new aMap.PlaceSearch({
    pageSize: 10, // 单页显示结果条数
    pageIndex: 1, // 页码
    map: map, // 展现结果的地图实例
    panel: "panel", // 结果列表将在此容器中进行展示。
    autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
  });
  //关键字查询
  placeSearch.search(keyword.value);
  placeSearch.on("selectChanged", function (e) {
    const data = e.selected.data;
    const temp = {
      province: data.pname,
      provinceCode: data.pcode,
      city: data.cityname,
      cityCode: data.citycode,
      county: data.adname,
      countyCode: data.adcode,
      storeAddr: data.address,
      storeDetailAddr: data.pname + data.cityname + data.adname + data.address,
      longitude: `${data.location.lng}`,
      latitude: `${data.location.lat}`
    };
    // 回调父组件
    emit("change", temp);
  });
}
// 宏注册emit
const emit = defineEmits(["change"]);

const keyword = ref("");

<template>
  <div id="map-box">
    <div id="container" />
    <!-- 增加的部分 -->
    <div id="myPageTop">
      <el-input
        @keyup.enter="search"
        placeholder="请输入地址"
        v-model="keyword"
      >
        <template #prepend>
          <el-button :icon="Search" @click="search" />
        </template>
      </el-input>
      <div id="panel" />
    </div>
  </div>
</template>

3.3 暴露增加标记函数

let loaded = false; // 判断地图是否完成渲染
const record = []; // 记录地图未加载完成之前的添加标签记录
// 循环渲染之前记录的地址
function loadRecord() {
  record.forEach(item => {
    addMarker(item.longitude, item.latitude, item.content);
  });
}
function addMarker(longitude: number, latitude: number, content: string) {
  if (!loaded) {
    record.push({ longitude, latitude, content });
    return;
  }
  if (!longitude || !latitude) return;
  const marker = new aMap.Marker({
    position: [longitude, latitude],
    icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
    anchor: "bottom-center",
    offset: new aMap.Pixel(0, 0)
  });

  marker.setMap(map);
  marker.setTitle(content);
  // 设置label标签
  // label默认蓝框白底左上角显示，样式className为：amap-marker-label
  marker.setLabel({
    direction: "bottom",
    offset: new aMap.Pixel(0, 0), //设置文本标注偏移量
    content: `<div style='padding:1px 5px;'>${content}</div>` //设置文本标注内容
  });
  map.setZoomAndCenter(11, [longitude, latitude]); //同时设置地图层级与中心点
}
defineExpose({
  addMarker
});

4 全部代码

<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
<script type="text/javascript" lang="ts">
window._AMapSecurityConfig = {
  securityJsCode: "秘钥"
};
</script>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { Search } from "@element-plus/icons-vue";

let map = null;
let aMap = null;
let loaded = false;
const record = []; // 记录地图未加载完成之前的添加标签记录
onMounted(() => {
  AMapLoader.load({
    key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.PlaceSearch", "AMap.AutoComplete"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then(AMap => {
    // 第一参数是对应的div的id
    map = new AMap.Map("container", {
      // 设置地图容器id
      viewMode: "3D", // 是否为3D地图模式
      zoom: 11, // 初始化地图级别
      center: [116.397428, 39.90923] // 初始化地图中心点位置
    });
    aMap = AMap;
    // 地图加载完成后会触发此回调函数
    loaded = true;
    loadRecord();
  });
});
onUnmounted(() => {
  map?.destroy();
});
// 循环渲染之前记录的地址
function loadRecord() {
  record.forEach(item => {
    addMarker(item.longitude, item.latitude, item.content);
  });
}
function addMarker(longitude: number, latitude: number, content: string) {
  if (!loaded) {
    record.push({ longitude, latitude, content });
    return;
  }
  if (!longitude || !latitude) {
  	console.error("缺少必要信息")
  	return;
  }
  const marker = new aMap.Marker({
    position: [longitude, latitude],
    icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
    anchor: "bottom-center",
    offset: new aMap.Pixel(0, 0)
  });

  marker.setMap(map);
  marker.setTitle(content);
  // 设置label标签
  // label默认蓝框白底左上角显示，样式className为：amap-marker-label
  marker.setLabel({
    direction: "bottom",
    offset: new aMap.Pixel(0, 0), //设置文本标注偏移量
    content: `<div style='padding:1px 5px;'>${content}</div>` //设置文本标注内容
  });
  map.setZoomAndCenter(11, [longitude, latitude]); //同时设置地图层级与中心点
}
defineExpose({
  addMarker
});
function search() {
  const placeSearch = new aMap.PlaceSearch({
    pageSize: 10, // 单页显示结果条数
    pageIndex: 1, // 页码
    map: map, // 展现结果的地图实例
    panel: "panel", // 结果列表将在此容器中进行展示。
    autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
  });
  //关键字查询
  placeSearch.search(keyword.value);
  placeSearch.on("selectChanged", function (e) {
    const data = e.selected.data;
    const temp = {
      province: data.pname,
      provinceCode: data.pcode,
      city: data.cityname,
      cityCode: data.citycode,
      county: data.adname,
      countyCode: data.adcode,
      storeAddr: data.address,
      storeDetailAddr: data.pname + data.cityname + data.adname + data.address,
      longitude: `${data.location.lng}`,
      latitude: `${data.location.lat}`
    };
    // 回调父组件
    emit("change", temp);
  });
}
const emit = defineEmits(["change"]);

const keyword = ref("");
</script>

<template>
  <div id="map-box">
    <div id="container" />
    <!-- 增加的部分 -->
    <div id="myPageTop">
      <el-input
        @keyup.enter="search"
        placeholder="请输入地址"
        v-model="keyword"
      >
        <template #prepend>
          <el-button :icon="Search" @click="search" />
        </template>
      </el-input>
      <div id="panel" />
    </div>
  </div>
</template>

<style scoped>
#map-box {
  width: 100%;
  height: 450px;
  position: relative;
}
#container {
  width: 100%;
  height: 100%;
}

#myPageTop {
  position: absolute;
  top: 5px;
  right: 10px;
  font-family: "Microsoft Yahei", Pinghei;
  font-size: 14px;
  background: none 0px 0px repeat scroll rgb(255, 255, 255);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(204, 204, 204);
  border-image: initial;
  margin: 10px auto;
  padding: 6px;
}
#panel {
  background-color: white;
  max-height: 400px;
  overflow-y: auto;
}
</style>

5 实现效果

回显效果，会自动设置到地图中心
在这里插入图片描述
选点效果
在这里插入图片描述

勉灬之
关注
  • 28
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue+地图选点组件（百度地图）
08-10
本组件是用于在地图上选点、回显坐标等
vue基于Vue2.0和高德地图的地图组件实例
08-30
本篇文章主要介绍了vue基于Vue2.0和高德地图的地图组件实例，非常具有实用价值，需要的朋友可以参考下
vue+高德地图写地图选址组件的方法
11-29
前言 现在做这个移动端的项目中有一个地图选址的功能，本来高德地图中有一个现成的选址组件，但是有两个问题，因为他是用iframe引用的，第一改不了样式，这点还勉强能接受；第二他的左上角有一个返回键，在搜索的时候可以返回到地图界面，但是在地图界面时点返回没有用，试了半天也没搞明白怎么监听到那个返回键的点击事件，所以趁这两天项目基本结束自己写一个把这个功能优化一下，也方便以后使用。 开整 vue的安装使用啥的我在这就不说了，直接开始地图选址组件。 首先上高德开放平台弄一个key，然后在index.html引入 <script src="https://webapi.amap.com/maps?v
vue2用高德地图实现绘制多边形电子围栏
09-05
vue2用高德地图实现绘制多边形电子围栏
Vue3管理后台项目使用高德地图选点
老司机的后备箱
08-20 2469
最近在做的管理后台项目中有一个业务场景是添加门店的地址和经纬度，地址可以输入，但经纬度这样处理却不合适，最好是让用户在地图上搜索或者直接点击获取点的经纬度等详细信息。因为我们的app中使用了高德地图，所以管理后台我也选用高德地图来实现上面的业务需求，下面来看一下具体的使用流程吧。
vue 使用高德地图实现自定义选取起点和终点功能，支持搜索地址跳转定位（保姆级教程）
qq_45970102的博客
03-17 4790
vue 使用高德地图实现自定义选取起点和终点功能，支持搜索地址跳转定位
Vue中如何进行地理位置搜索与地点选择
IT徐师兄
06-15 2780
在Vue中进行地理位置搜索和地点选择通常需要使用到一些开源的地图API和第三方组件。本文介绍了如何使用Vue-Places和Vue2Leaflet组件实现地点自动补全、地图显示和地点选择等功能。在实际开发中，我们还需要根据具体的业务需求和API文档来选择合适的地图API和组件，以实现更加丰富和实用的地理位置搜索和地点选择功能。
vue使用vue-amap 高德地图进行选点和搜索
weixin_45356397的博客
01-17 5208
vue使用vue-amap进行地图点的搜索和点击选点 npm install vue-amap --save //下载npm 包 在main.js主文件中进行引用 import VueAMap from "vue-amap"; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: "XXXXXXXXXXXXXXXXXX",//高德开放平台申请的key值 plugin: [ "AMap.Autocomplete", //输入提示插.
技术点：使用vue和element实现地图选点功能
Big_YiFeng的博客
08-26 2438
通过腾讯地图组件与页面通信的原理，实现一个点击选择地图进行选点的功能
Vue+element-ui实现百度地图位置选择功能
m0_67750137的博客
12-12 949
Vue+element-ui实现百度地图位置选择功能
基于Vue2.0和高德地图的地图组件实例
0303
07-20 770
vuemap/vue-amap是基于高德JSAPI2.0、Loca2.0封装的vue组件库。申请高德地图账号和key。
vue集成高德地图避免踩坑
qq_39327953的博客
11-30 3015
222
vue3 使用高德地图api实现地图选点获取对应经纬度
最新发布
Lsir1998的博客
11-30 1233
vue3实现地图选点获取经纬度，地图标点
vue使用谷歌地图绘制图形以及地图选点功能
qq_45963071的博客
08-24 2900
使用谷歌地图绘制多边形以及地图选点，功能齐全、现已封装，拿来即可食用
Vue3使用高德地图、搜索、地图选点、以及省市区三级联动
m0_67584973的博客
03-31 3740
Vue3使用高德地图、搜索、地图选点、以及省市区三级联动
Vue 使用高德地图，添加点标记 + 点击地图获取坐标 + 带搜索（即地理编码 + 逆地理编码） - 附完整示例
m0_48968874的博客
07-10 5746
与真实世界联通 - 高德开放平台为开发者赋能，将地图精致地呈现在您的应用中无论基于哪种平台，都可以通过高德开放平台API和SDK，轻松地完成地图的构建工作地图 | 高德地图API地图，地图sdk，地图JS API，地图定制，自定义地图，地图覆盖物，地图绘制，路线规划，坐标转换，距离/面积计算，距离测量，室内地图，地图显示，地图个性化，地图开发，室内定位。
vue 使用高德地图，选点定位，搜索定位
热门推荐
PrimaryColor
05-19 1万+
效果图： 一、申请高德地图的使用密钥key。 高德开放平台 | 高德地图API 在高德地图控制台里面“我的应用”中创建应用，并添加key就可以拿到密钥key和安全密钥了。 二、安装依赖。 npm install -S vue-amap 三、使用。 main.js引入依赖。 import VueAMap from 'vue-amap' Vue.use(VueAMap); // 初始化vue-amap VueAMap.initAMapApiLoader({ key:.
vue 使用 Vue Baidu Map使用 选择坐标、设置范围 百度地图
weixin_50885665的博客
06-15 919
template>data() {return {center: {lng: 0, lat: 0}, // 设置中心点信息zoom: 3, // 地图初始放大倍数markerPoint: {lng: 118.7995, lat: 31.9663}, // 点的位置dragging: true, // 是否可以拖拽点raiseOnDrag: true, // 拖拽时是否有动画效果pointIcon: require('自定义的点的图片地址')},methods: {// 创建地图。
高德地图api基于vue如何添加本地png在地图上
07-12
要在基于 Vue 的高德地图 API 上添加本地 PNG 图片，你可以按照以下步骤进行操作： 1. 首先，将 PNG 图片添加到你的 Vue 项目中的静态资源文件夹（通常是 `src/assets` 目录）。 2. 在需要使用地图的组件中，使用 `AMap` 对象加载地图，并在地图加载完成后调用 `AMap.plugin` 方法加载 `AMap.OverView` 插件。 ```javascript import AMapLoader from '@amap/amap-jsapi-loader'; export default { mounted() { AMapLoader.load({ key: 'your-amap-key', version: '2.0', plugins: ['AMap.OverView'], }).then(() => { this.initMap(); }); }, methods: { initMap() { // 创建地图实例 const map = new AMap.Map('mapContainer', { center: [lng, lat], zoom: 13, }); // 添加 PNG 图片覆盖物 const pngMarker = new AMap.Marker({ position: [lng, lat], content: '<div><img src="your-image-path.png" alt="png-marker"></div>', offset: new AMap.Pixel(-20, -20), // 设置图片偏移量 }); map.add(pngMarker); }, }, }; ``` 注意将 `your-amap-key` 替换为你的高德地图 API 密钥，并将 `your-image-path.png` 替换为你添加的 PNG 图片的路径。 3. 在组件的模板中创建一个具有指定 id 的容器元素，用于显示地图。 ```html <template> <div id="mapContainer"></div> </template> ``` 4. 在组件的样式中，为地图容器指定高度和宽度。 ```css <style scoped> #mapContainer { height: 400px; width: 100%; } </style> ``` 通过以上步骤，你可以在基于 Vue 的高德地图 API 上成功添加本地 PNG 图片在地图上。记得替换相应的密钥和图片路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值