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百度地图选点组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。