vue 中使用高德地图（原生方法）可搜索定位

需求：表单中的经纬度和位置需要通过高德地图定位点进行拾取，并且地图可以进行搜索，搜素出来的定位点也可进行点击获取位置

<template lang="html">
<Modal v-model="visible" title="位置定位" width="800px" :mask-closable="false" @on-cancel="closeModal"><div class="container"><div class="search-box"><input id="tipInput" placeholder="输入关键字搜索"/></div><div style="height:400px" id="container" tabindex="0"></div><div class="toolbar">地址: {{ address }}</div></div><div slot="footer" class="dialog-footer"><Button type="primary" @click="onSave">确定</Button><Button style="margin-left: 8px" @click="closeModal">取消</Button></div>
</Modal>
</template><script>
export default {name: 'MyMap',props: {// 控制model显示隐藏isShow: {type: Boolean,default: true},location: {type: Object,default: () => {return {}}}},data() {let self = thisreturn {map: null,visible: this.isShow,address: '',lng: 108.88671,lat: 34.22344}},watch: {isShow(n, o) {if (n && o) {this.visible = n;}}},mounted() {this.init()this.mapSearchInit()},methods: {closeModal() {this.visible = false;this.$emit('showModel', this.visible);},//地图初始化init() {let that = thisthat.address = that.location.address;let map = new AMap.Map('container', {resizeEnable: true,center: [that.location.lng, that.location.lat],zoom: 16,lang: 'zh'})that.map = map;AMap.plugin(['AMap.Geocoder'], () => {let geocoder = new AMap.Geocoder({radius: 1000})let marker = new AMap.Marker({position: [that.location.lng, that.location.lat],offset: new AMap.Pixel(-13, -30),icon: new AMap.Icon({image: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",size: new AMap.Size(28, 35), //图标大小imageSize: new AMap.Size(28, 35)}),})marker.setMap(map);// 绑定事件map.on('click', function (ev) {console.log('ev', ev)regeoCode([ev.lnglat.lng, ev.lnglat.lat])that.lng = ev.lnglat.lng.toString()that.lat = ev.lnglat.lat.toString()})function regeoCode(lnglat) {map.add(marker)marker.setPosition(lnglat)geocoder.getAddress(lnglat, function (status, result) {if (status === 'complete' && result.regeocode) {that.address = result.regeocode.formattedAddressconsole.log('address', that.address);} else {console.log('位置获取失败')}})}})AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Geocoder', 'AMap.Geolocation'], () => {map.addControl(new AMap.Scale())})window.modalMap = map},mapSearchInit() {let that = this;var autoOptions = {input: "tipInput"};var auto = new AMap.Autocomplete(autoOptions);console.log('auto', auto)var placeSearch = new AMap.PlaceSearch({map: that.map});  //构造地点查询类AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发AMap.event.addListener(placeSearch, 'markerClick', function(e) {console.log('eeee', e)that.address = e.data.address;that.lng = e.data.location.lngthat.lat = e.data.location.lat// that.$emit('saveModel', e.data.location.lng, e.data.location.lat, e.data.address);})function select(e) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name);  //关键字查询查询}},onSave() {this.$emit('saveModel', this.lng, this.lat, this.address);}}
}
</script><style lang="css">
.container {width: 100%;height: 500px;
}.search-box {z-index: 5;width: 100%;height: 30px;margin-bottom: 20px;
}.search-box input {float: left;width: 80%;height: 100%;border: 1px solid #30ccc1;padding: 0 8px;outline: none;
}.search-box button {float: left;width: 20%;height: 100%;background: #30ccc1;border: 1px solid #30ccc1;color: #fff;outline: none;
}.toolbar {margin-top: 20px;
}
.amap-sug-result { z-index: 9999; }
</style>

vue 中使用高德地图（原生方法）可搜索定位相关推荐

Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围一.先上效果图二.高德地图Vue引用一.先上效果图二.高德地图Vue引用 1. webpack引入高德在webpack.b ...
vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
react Amap引入高德地图，并实现搜索定位。
react 引入高德地图,并实现搜索定位一.react 引入Amap: Amap官方地址:https://elemefe.github.io/react-amap/articles/start 按照 ...
Vue 中使用高德地图api
比较简单的原生方式 <template><div style="margin: 0px;padding: 0px"><div id="pan ...
vue中引入高德地图
❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️ 总的来说,vue组件中使用高德地图的方式有两种,一种是vue-amap :一套专门用于vue的高德地图插件:另外一种是原生的高德地图. 方式 ...

vue 中使用高德地图（原生方法）可搜索定位

需求：表单中的经纬度和位置需要通过高德地图定位点进行拾取，并且地图可以进行搜索，搜素出来的定位点也可进行点击获取位置

vue 中使用高德地图（原生方法）可搜索定位相关推荐

最新文章

热门文章