vue2百度地图选点组件

代码块 loadMap.js
组件markerMap.vue
使用

代码块 loadMap.js

/*** 动态加载百度地图api函数* @param {String} ak  百度地图AK，必传*/
export default function loadBMap(ak) {return new Promise((resolve, reject) => {if (typeof window.BMap !== "undefined") {resolve(window.BMap);return true;}window.onBMapCallback = function() {resolve(window.BMap);return true;};const script = document.createElement("script");script.type = "text/javascript";script.src =`https://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=onBMapCallback&s=1`;script.onerror = reject;document.head.appendChild(script);return true;});
}

组件markerMap.vue

<template><div class="markerMap-wrap"><!-- 地图-start --><div id="map" :style="{ width: mapWidth, height: mapHeight }"></div><!-- 地图-end --><!-- 输入框 --><div class="markerMap-input"><span class="markerMap-label">地址：</span><input type="text" id="suggestId" class="input-style" :style="{ width: inputWidth + 'px', height: inputHeight + 'px' }" :placeholder="placeholder" /></div></div>
</template><script>
import loadBMap from '@/utils/loadMap.js';
export default {props: {mapWidth: {type: String,default: () => {return '100%';}},mapHeight: {type: String,default: () => {return '400px';}},placeholder: {type: String,default: () => {return '请输入搜索地址';}},inputWidth: {type: String,default: () => {return '200';}},inputHeight: {type: String,default: () => {return '30';}}},data() {return {inputValue: ''};},mounted() {this.baiDuMapInit();},methods: {/*** 初始化百度地图* **/baiDuMapInit() {const mapInit = loadBMap('lopPFKvmkRLAiG9Z7TffY8v2hRaVrVA5');mapInit.then(BMap => {//创建地图实例,位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。const map = new BMap.Map('map');map.centerAndZoom('上海', 12); // 初始化地图,设置城市和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放const ac = new BMap.Autocomplete({ input: 'suggestId', location: map }); //建立一个自动完成的对象ac.addEventListener('onconfirm', e => {//鼠标点击下拉列表后的事件const tempValue = e.item.value;const searchValue = tempValue.province + tempValue.city + tempValue.district + tempValue.street + tempValue.business;this.inputValue = searchValue;this.setPlace(BMap, map, searchValue);});});},/*** 根据输入框的值在地图上添加标记点* @param*   BMap：地图对象*   searchValue：输入框下拉数据选中的值* **/setPlace(BMap, map, searchValue) {map.clearOverlays(); //清除地图上所有覆盖物const local = new BMap.LocalSearch(map, {//智能搜索onSearchComplete: res => {const pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果map.centerAndZoom(pp, 21);map.addOverlay(new BMap.Marker(pp)); //添加标注this.movePoint(BMap, map, res.Ir[0].point);}});local.search(searchValue);},/*** 移动标记点* @param*   BMap：地图对象*   latlng：经纬度* **/movePoint(BMap, map, latlng) {map.clearOverlays(); //清除地图上所有覆盖物//使用BMap命名空间下的Point类来创建一个坐标点const point = new BMap.Point(latlng.lng, latlng.lat);const marker = new BMap.Marker(point, {enableDragging: true});map.addOverlay(marker);this.latlngToAddress(BMap, latlng);// 覆盖物拖拽开始事件marker.addEventListener('dragstart', e => {// 清除一些覆盖物console.log('[开始]', e);});// 覆盖物拖拽事件marker.addEventListener('dragend', () => {const nowPoint = marker.getPosition(); // 拖拽完成之后坐标的位置(经纬度)this.latlngToAddress(BMap, nowPoint);});},/*** 地址解析* @param*   BMap：地图对象*   latlng：经纬度* **/latlngToAddress(BMap, latlng) {const geoc = new BMap.Geocoder();geoc.getLocation(latlng, rs => {console.log(rs);if (rs.surroundingPois.length > 0) {rs.surroundingPois[0].tempAddress = this.inputValue;this.$emit('map', rs.surroundingPois[0]);} else {rs.tempAddress = this.inputValue;this.$emit('map', rs);}});}}
};
</script><style lang="scss" scoped>
.markerMap-wrap {width: 100%;min-height: 200px;.markerMap-input {width: 100%;margin-top: 10px;display: flex;align-items: center;.markerMap-label {font-size: 16px;color: #333;padding-right: 10px;}.input-style {border: 1px solid #dcdcdc;border-radius: 8px;padding-left: 12px;padding-right: 12px;}}
}
</style>

使用

<template><div class="match"><p>请输入地址：</p><markerMap @map="markerMapHandle"></markerMap><p>地址：{{ addressObject.tempAddress }}</p><p>地址：{{ addressObject.address }} {{ addressObject.title }}</p><p>lng：{{ addressObject.point.lng }}</p><p>lat：{{ addressObject.point.lat }}</p></div>
</template><script>
import markerMap from '@/components/markerMap.vue';
export default {components: {markerMap},data() {return {addressObject: {title: '--',address: '--',point: {lng: '--',lat: '--'}}};},mounted() {},methods: {markerMapHandle(params) {console.log('[miao]', params);this.addressObject = params;}}
};
</script><style lang="scss" scoped>
.match {border: 1px solid red;width: 100%;
}
p {font-size: 16px;margin-top: 12px;
}
</style>

vue2百度地图选点组件相关推荐

UNIAPP中腾讯地图选点组件和wx.getLocation配合使用，实现定位当前位置，并获取当前位置信息。
我是用地图选点组件和wx.getLocation()接口组合起来实现定位当前位置并获取当前位置信息进行使用,大致说一下自己的实现步骤. 写的虽然粗糙,但是纯纯干货啊兄弟!!! 腾讯位置服务申请key ...
地图选点 php,百度地图选点–Bootstrap模态框(Modal)插件
在网站的开发过程中,例如商家的注册等,需要商家设定自己的经纬度进行对商家的精确定位,同时也方便用户查找到附近距离范围内的商家.这样更利于网站的用户和商家互动.商家设定自己的经纬度就需要使用到百度地图2 ...
腾讯位置服务地图选点组件使用示例
本文主要使用到的功能为: 1.选择地址发送(地图选点组件 ) 2.实时地址静态图 3.地图调起 ,手机查看选址组件主要是选地点的信息,如下: 在js或者数据库中保存这些信息,静态图片和地图API的调 ...
Ant design Of Vue vue-amap 高德地图选点组件
参考链接: Vue(vue-amap) 接入高德地图获取坐标与地址信息 'AMapUI' is not defined 异常的话按照这个处理,没有异常就可以不用看 tips1: 本组件直接将main ...
vue3引入百度地图API组件的办法：
第一种全局引入 VueCli3引入百度地图Api详细步骤+宽高自动页面自适应(踩坑+源代码)_BBBling的博客-CSDN博客第二种组件化引入: 第一步安装百度地图依赖包 npm i vue ...
百度地图选点定位界面
1.去申请app的Appkey,对百度sdk的引入和配置 2.xml <?xml version="1.0" encoding="utf-8"?> ...
vue集成腾讯地图的地图选点组件
文章目录一.地图弹窗二.监听地图搜索事件一.地图弹窗 <el-dialog title="选择地图" :visible.sync="dialogFormVis ...
腾讯地图之地图选点组件隐藏返回当前位置按钮
https://lbs.qq.com/webApi/component/componentGuide/componentPicker 写个中间接口中转腾讯的HTML,完全接手地图选点页面,任意操作 i ...
vue/react高德地图选点组件（坐标拾取工具）
一些项目会常用到这个功能,把自己做的组件分享一下,vue版和react版都有 vue版 github地址 (vue3) react版 github地址效果安装 vue: npm install v ...

vue2百度地图选点组件

vue2百度地图选点组件

代码块 loadMap.js

组件markerMap.vue

使用

vue2百度地图选点组件相关推荐

最新文章

热门文章