vue3+ts+vite,使用高德api实现搜索城市展示在地图上

App.vue


<template><div class="app"><div class="search"><input type="text" v-model="input"><button @click="search">搜索</button></div><div class="map"><map-container  :search="input2"  /></div></div>
</template><script setup lang="ts">
import { ref } from "vue";
import MapContainer from "./components/MapContainer.vue";
const input = ref("");
const input2 = ref("");
function search() {input2.value=input.value
}
</script>
<style scoped>
.app {width: 100vw;height: 100vh;
}
.map{width: 100%;height: calc(100vh - 50px);
}
.search{width: 100vw;height: 50px;
}
</style>

MapContainer.vue

<template><div id="container"></div>
</template><script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import { ref, onMounted, watch } from "vue";
const props = defineProps({search: String,
});
const map = ref<any>(null);
let geocoder:any;
let locationArr=ref<any>([121.473667, 31.230525])
watch(() => props.search,(newValue) => {console.log("search", newValue);searchLocation(geocoder);}
);
function initMap() {AMapLoader.load({key: "2c1c4affeb410923990fec54c5af721a", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.ToolBar","AMap.Scale","AMap.HawkEye","AMap.MapType","AMap.Geolocation","AMap.Geocoder",], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {map.value = new AMap.Map("container", {//设置地图容器idviewMode: "3D", //是否为3D地图模式zoom: 10, //初始化地图级别center: locationArr.value, //初始化地图中心点位置});map.value.addControl(new AMap.Scale());map.value.addControl(new AMap.ToolBar());map.value.addControl(new AMap.HawkEye());map.value.addControl(new AMap.MapType());map.value.addControl(new AMap.Geolocation());geocoder = new AMap.Geocoder({ city: "010" });}).catch((e) => {console.log(e);});
}
function searchLocation(geocoder: any) {geocoder.getLocation(props.search, function (status:any, result:any) {if (status === "complete" && result.info === "OK") {// result中对应详细地理坐标信息console.log('result',result);console.log('result',result.geocodes[0].location);let lngLat=[result.geocodes[0].location.lng,result.geocodes[0].location.lat]console.log('result',lngLat);locationArr.value=lngLatinitMap()}});
}
onMounted(() => {initMap();
});
</script><style scoped>
#container {padding: 0px;margin: 0px;width: 100%;height: 100%;
}
</style>

效果

vue3+ts+vite,使用高德api实现搜索城市展示在地图上相关推荐

vue3+ts+vite后台管理模板
vue3+ts+vite后台管理模板支持前后端控制权限,使用uniapp+vue3+ts+elementplus+vite开发,码云地址:https://gitee.com/yongqiang062 ...
Vue3+TS+Vite无法使用require导入图片的解决方法
Vue3+TS+Vite无法使用require导入图片的解决方法问题描述, 当使用const xxx = require('xxx')浏览器会报错, 为啥使用vue-cli脚手架时不会出问题? 是因 ...
【Vue3+Ts+Vite】使用Vite与TS构建Vue3项目
Vue3+Ts+Vite
基于Vue3+TS+Vite+Cesium创建项目
基于Vue3+TS+Vite+Cesium创建项目基于Vite构建项目安装配置Cesium 创建Cesium三维视图运行结果随着近几年社会的发展,人们对三维可视化的需求也是越来越多,三维GIS ...
Vue3+TS+Vite+Element Plus搭建后台管理系统
Vue3+TS+Vite+Element Plus搭建后台管理系统 1.简介 2.效果图 3.技术栈 4.项目目录 5.setting.js(全局配置文件) 6.路由router 7.状态管理stor ...
笔记：百度地图通过输入地名搜索位置显示在地图上
场景:刚刚接到需求---通过输入地名搜索位置显示在地图上,然后百度了一番,发现很多都是BMap版本的地图而最新我用的是BMapGL地图所以多多少少有一些不一样,查略相关文档得出解决方案
高德地图Web端JavaScript API开发(一)---个性化展示(自定义地图)
遇到一个功能,需要使用地图功能,但是地图上不要显示太多的物体,不然会遮盖地图上的标记,因此需要自定义地图,去掉一些不需要的覆盖物. 话不多说,直接走步骤! First. 需要登录高德开发者控制台,在地 ...
ArcGIS api for javascript——查找任务-在地图上查找要素
描述本例展示了如何使用查找任务搜索数据.本例在地图上用图表显示结果并用 DojoX的grid格式化结果为表格样式. FindTask构造函数需要一个ArcGIS Server地图服务的URL.本例使 ...
vue3+ts+vite 路由详解
安装 1.首先创建项目 npm init vite@latest 输入文件名,选择Vue.TypeScript 2.vscode打开项目,安装router,less,less-loader,@type ...

vue3+ts+vite,使用高德api实现搜索城市展示在地图上

App.vue

MapContainer.vue

效果

vue3+ts+vite,使用高德api实现搜索城市展示在地图上相关推荐

最新文章

热门文章