当前位置: 首页 > 工具软件 > vue-mapvgl > 使用案例 >

vue百度地图手动定位位置

濮书
2023-12-01

html

<el-button type="primary" style="margin-left: 10px;" @click="latitude()">获取经纬度</el-button>
<el-dialog
	
      width="50%"
      :before-close="cancel"
      :closable="false"
      :mask-closable="false"
      :visible="visible"
    >
      <span>
		  <p>经纬度:{{center.lng}},{{center.lat}}</p>
		  <baidu-map class="map" :center="{lng: 116.394155, lat: 39.921696}" :zoom="15" 
		  :scroll-wheel-zoom="true"
		   @click="getClickInfo"
		  >
		  <!-- mapType="BMAP_SATELLITE_MAP" -->
		  <bm-control :offset="{ width: '10px', height: '10px' }">
		    <bm-auto-complete v-model="keyword" :sugStyle="{ zIndex: 999999 }">
		      <input
		        type="text"
		        placeholder="请输入搜索关键字"
		        class="serachinput"
		      />
		    </bm-auto-complete>
		  </bm-control>
		  <bm-local-search
		    :keyword="keyword"
		    :auto-viewport="true"
		    style="width:0px;height:0px;overflow: hidden;"
		  ></bm-local-search>
		   </baidu-map>
        
	  </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>

js

export default {
		components: {
			// nopro
		},
		data() {
			return {
				visible:false,//隐藏百度地图弹窗
                center: { lng: 104.710326, lat: 27.118777 },
				zoom: 15,
			}
		},
		created() {
			
		},
		methods:{
			latitude() {
				this.visible = true,
            },
/***
			 * 确认
			 */
			confirm: function () {
				this.visible = false,
				console.log(this.center)
				this.addBidding_Data.Location = this.center.lng + ',' + this.center.lat//获取的经纬度
			  this.$emit('map-confirm', this.center)
			},
			/***
			 * 取消
			 */
			cancel: function () {
				this.visible = false
			  this.$emit('cancel')
			},

		},
	}

public/index.html

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=vQSaczUq2vZ83ygi84YN8rViDKSXOCXB&s=1"></script>
//ak通过百度地图api获取

 类似资料: