首页vue3中组合式api中使用百度地图，添加城市列表控件

vue3中组合式api中使用百度地图，添加城市列表控件

时间: 2023-11-26 19:06:24 浏览: 93

vue项目中使用百度地图的方法

Vue 项目中使用百度地图的方法 Vue 项目中使用百度地图的方法主要介绍了在 Vue 项目中使用百度地图的方法。本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下。一、在百度地图申请密钥在使用百度地图之前，需要在百度地图开放平台申请密钥。申请密钥后，将<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script>中的密钥替换成你申请的密钥。在 Vue 项目的 index.html 引用。二、在 build 文件下下的 webpack.base.conf.js贴入代码 externals: { "BMap": "BMap" } 这个配置是为了在 Vue 项目中使用百度地图的 JavaScript 库。三、map.vue 代码 map.vue 代码是使用百度地图的核心代码。该代码主要包括了地图容器、输入框、按钮、标签等组件。下面是 map.vue 的代码： <template> <div> <el-row > <el-col :offset="2" :span="8"> <el-input :id="suggestId" v-model="address_detail" :clearable='clearable' placeholder="请输入店铺地址,获取店铺坐标" > </el-input> </el-col> <el-col :span="2"> <el-button id="position" @click="search" type="primary">定位</el-button> </el-col> <el-col :span="12" > <el-tag type="success" v-clipboard:copy="userlocation.lng" v-clipboard:success="onCopy" v-clipboard:error="onError" >经度 {{userlocation.lng}}</el-tag> <el-tag type="success" v-clipboard:copy="userlocation.lat" v-clipboard:success="onCopy" v-clipboard:error="onError">纬度 {{userlocation.lat}}</el-tag> <el-tag type="success" ><<<<点击左侧按钮复制经纬度信息</el-tag> </el-col> </el-row> <el-row> <el-col :offset="2" :span="18"> <div id="map_canvas" class="allmap"></div> </el-col> </el-row> </div> </template> <script> export default { data() { return { address_detail: "", //详细地址 userlocation: { lng: "", lat: "" }, clearable: true, suggestId: "suggestId", map: {}, mk: {} }; }, created() { }, methods: { drawMap() { this.map = new BMap.Map("map_canvas"); // 创建地图实例 this.map.addControl(new BMap.NavigationControl()); // 启用放大缩小尺 this.map.enableScrollWheelZoom(); this.getlocation();//获取当前坐标, 测试时获取定位不准。 var point = new BMap.Point(this.userlocation.lng, this.userlocation.lat); // 创建点坐标 this.map.centerAndZoom(point, 13); // 初始化地图，设置中心点坐标和地图级别 var marker = new BMap.Marker(point); // 创建标注 this.map.addOverlay(marker); // 将标注添加到地图中 var ac = new BMap.Autocomplete({ //建立一个自动完成对象 input: "suggestId", location: this.map }); } } } </script> 这个代码使用了 Vue 框架和百度地图的 JavaScript 库，实现了地图的显示和交互功能。四、使用百度地图的方法在使用百度地图的方法时，需要在 Vue 项目中引入百度地图的 JavaScript 库，然后在组件中使用百度地图的 API 实现地图的显示和交互功能。例如，在上面的代码中，我们使用了 BMap.Map、BMap.Point、BMap.Marker 等 API 实现了地图的显示和交互功能。五、结语在 Vue 项目中使用百度地图的方法可以实现地图的显示和交互功能，提高了用户体验和应用程序的可用性。本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下。

要在Vue3中使用百度地图，你需要先在Vue3项目中引入百度地图API，并在组件中创建地图实例。在组合式API中，你可以使用`onMounted`钩子函数来初始化地图并添加城市列表控件。具体步骤如下： 1. 在`<head>`标签中引入百度地图API，例如： ``` <script src="http://api.map.baidu.com/api?v=2.0&ak=your_ak"></script> ``` 其中，`your_ak`是你在百度地图开放平台申请的AK。 2. 在组件中使用`ref`来创建地图实例，例如： ``` <template> <div ref="mapContainer"></div> </template> <script> import { ref, onMounted } from 'vue' export default { setup() { const mapContainer = ref(null) let map = null onMounted(() => { map = new BMap.Map(mapContainer.value) // 中心点为北京 const point = new BMap.Point(116.404, 39.915) map.centerAndZoom(point, 15) // 添加城市列表控件 const size = new BMap.Size(70, 20) map.addControl(new BMap.CityListControl({ anchor: BMAP_ANCHOR_TOP_LEFT, offset: size, // 切换城市时更新地图中心点 onChangeBefore: function () { const cityName = this.cityList.value map.setCenter(cityName) } })) }) return { mapContainer } } } </script> ``` 在`onMounted`钩子函数中，创建地图实例并设置中心点，然后使用`addControl`方法添加城市列表控件。在控件的`onChangeBefore`事件中，获取选择的城市名称并设置地图中心点。注意：在使用百度地图API时，请遵守百度地图开放平台的相关规定和条款。

阅读全文