vue3+ts+amap/amap-jsapi-loader实现高德地图搜索选取地点

1.安装amap/amap-jsapi-loader

npm i amap-jsapi-loader --save

2.注册高德api

官网地址：高德开放平台 | 高德地图API (amap.com)

注册之后点击右上角控制台，在如下位置添加key

按下图操作生成属于你的key（后面要用）

3.在页面使用

创建一个组件

1.页面构建

html页面如下，一个容器包裹一个输入框，分别赋予id，container是地图容器

<div id="container" style="width: 100%;height: 600px;position: relative"><inputv-model="keyword"class="keyword"id="keyword"placeholder="请输入搜索位置"style="position: absolute;z-index: 99;"/></div></div>

2.引入amap/amap-jsapi-loader

这里我直接在页面内引用

import AMapLoader from "@amap/amap-jsapi-loader";

3.初始化地图

import AMapLoader from "@amap/amap-jsapi-loader";
import { reactive, ref, shallowRef} from 'vue'const keyword = ref('')
// 存储搜索用的数据
const form: any = reactive({address: '',
})
const ininMap = () => {AMapLoader.load({key: 'your key',//api服务key--另外需要在public中使用安全密钥！！！version: '1.4.4',// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete']// 需要使用的的插件列表}).then((AMap) => {map = new AMap.Map('container', {resizeEnable: true,zoom: 9.5, // 地图显示的缩放级别center: [117.2, 31.8]//中心点})}
}

这里的key就是刚刚申请的key，填上即可

另外，还需在项目的public文件夹的index.html文件里添加安全密钥，代码如下

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><script>window._AMapSecurityConfig = {securityJsCode:'你的安全密钥',};//在这里添加</script><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

配置完成了接下来就是完成搜索框的配置

代码如下

const ininMap = () => {AMapLoader.load({key: 'your key',//api服务key--另外需要在public中使用安全密钥！！！version: '1.4.4',// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete']// 需要使用的的插件列表}).then((AMap) => {map = new AMap.Map('container', {resizeEnable: true,zoom: 9.5, // 地图显示的缩放级别center: [117.2, 31.8]})AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Geocoder'],function (
callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {const autoOptions = {input: 'keyword' // 使用联想输入的input的id}const autocomplete = new AMap.Autocomplete(autoOptions)const placeSearch = new AMap.PlaceSearch({map: map})const geocoder = new AMap.Geocoder({radius: 1000,extensions: 'all'})AMap.event.addListener(autocomplete, 'select', function (e) {placeSearch.setCity(e.poi.adcode)placeSearch.search(e.poi.name, function (status, result) {const pois = result.poiList.poisfor (let i = 0; i < pois.length; i++) {if (pois[i].name === e.poi.name) {console.log('搜索结果', pois[i])geocoder.getAddress([pois[i].location.lng, pois[i].location.lat],function (status, result) {console.log(result)if (status === 'complete' && result.info === 'OK') {form.address = result.regeocode.formattedAddress} else {form.address = ''}})}}})})})}).catch((e) => {})
}

页面完整代码如下

<template><div class="box"><div id="container" style="width: 100%;height: 600px;position: relative"><inputv-model="keyword"class="keyword"id="keyword"placeholder="请输入搜索位置"style="position: absolute;z-index: 99;"/></div></div>
</template><script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import { reactive, ref, shallowRef} from 'vue'const keyword = ref('')
// 存储搜索用的数据
const form: any = reactive({address: '',
})
let map = shallowRef(null)
const ininMap = () => {AMapLoader.load({key: 'your key',//api服务key--另外需要在public中使用安全密钥！！！version: '1.4.4',// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete']// 需要使用的的插件列表}).then((AMap) => {map = new AMap.Map('container', {resizeEnable: true,zoom: 9.5, // 地图显示的缩放级别center: [117.2, 31.8]})AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Geocoder'],function (callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {const autoOptions = {input: 'keyword' // 使用联想输入的input的id}const autocomplete = new AMap.Autocomplete(autoOptions)const placeSearch = new AMap.PlaceSearch({map: map})const geocoder = new AMap.Geocoder({radius: 1000,extensions: 'all'})AMap.event.addListener(autocomplete, 'select', function (e) {placeSearch.setCity(e.poi.adcode)placeSearch.search(e.poi.name, function (status, result) {const pois = result.poiList.poisfor (let i = 0; i < pois.length; i++) {if (pois[i].name === e.poi.name) {console.log('搜索结果', pois[i])geocoder.getAddress([pois[i].location.lng, pois[i].location.lat],function (status, result) {console.log(result)if (status === 'complete' && result.info === 'OK') {form.address = result.regeocode.formattedAddress} else {form.address = ''}})}}})})})}).catch((e) => {})
}ininMap()</script>

完成效果图

vue3+ts+amap/amap-jsapi-loader实现高德地图搜索选取地点相关推荐

android高德地图搜索地址,地点/周边搜索-Android平台-开发指南-高德地图车机版 | 高德地图API...
关键字搜索第三方通过该接口可传入关键字信息给auto,调起auto执行关键字搜索并跳转到搜索结果展现界面,官网版本都可支持参数说明参数说明是否必填类型 ActionAUTONAVI_STANDA ...
集合高德地图搜索--导出Excel数据工具
第一个是高德地图接口返回的数据对象的domain类 @Getter @Setter public class DataClass {private String name; //名称private S ...
高德地图-搜索服务-POI搜索
高德地图-搜索服务-POI搜索之前公司项目收货地址仿饿了么的收货地址,结果发现自己实现的关键字搜索和周边搜索,搜索到的poi列表跟饿了么的并不完全一样,后来考虑了下,应该是搜索的范围.类型之类的设置 ...
iframe内嵌高德地图搜索
iframe内嵌高德地图搜索
amap vueamap 与_vue 使用高德地图vue-amap组件过程解析
这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下首先 npm install -S ...
高德地图搜索附近地址所遇到的问题
调用高德地图JS-api,PlaceSearch搜索附近地址,地图上出现的点标记不易清除,clear方法无效 AMap.service('AMap.PlaceSearch',function(){// ...
高德地图怎么搜索marker_2018-07-06 高德地图搜索定位，滑动地图显示周边信息，根据地址搜经...
emmmm,效果图先行(搜索定位以及自由滑动地图展示周边位置信息,根据点击的位置获取经纬度) aa.gif 主要代码package com.dydd.wsp.dreamtree.ui.mapimpor ...
vue 高德地图搜索功能_VUE中使用高德地图做轨迹添加功能,帮助轨迹展示
准备工作使用前准备 : 高德地图key 使用插件: vue-amap 1.npm安装vue-amap npm install vue-amap --save import AMap from 'vu ...
高德地图搜索店名获取经纬度
有啥问题加QQ:3053916151 <!doctype html> <html lang="zh-CN"><head><meta cha ...