根据百度地图API自定义切换地图类型为卫星或普通

2024-04-02 06:59:52

业务场景

根据实际业务场景的需要，不能直接使用百度地图的控件，所以打算用百度地图API中map类的setMapType()方法实现。在Vue3中使用百度地图API切换地图类型为卫星或普通，创建一个自定义组件并在其中使用百度地图API。以下是一个简单的示例代码片段：

示例代码

<template><div id="mapContainer" style="height: 600px;width: 100%"></div><button @click="toggleMapType">{{ mapType === 'BMAP_NORMAL_MAP' ? '切换到卫星图' : '切换到普通地图' }}</button>
</template><script>
import { onMounted, ref } from 'vue';
import BMap from 'BMap'export default {name: 'BaiduMap',setup() {const mapType = ref('BMAP_NORMAL_MAP'); // 初始地图类型为普通地图let map = null;const initMap = () => {// 创建地图实例map = new BMap.Map('mapContainer');// 初始化地图，设置中心点坐标和地图级别map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);// 初始地图类型为普通地图map.setMapType(BMAP_NORMAL_MAP);}const toggleMapType = () => {// 切换地图类型if (mapType.value === 'BMAP_NORMAL_MAP') {mapType.value = 'BMAP_SATELLITE_MAP'map.setMapType(BMAP_SATELLITE_MAP)} else {mapType.value = 'BMAP_NORMAL_MAP'map.setMapType(BMAP_NORMAL_MAP)}}onMounted(() => {initMap();});return {mapType,toggleMapType,};},
};
</script>

注意

1.我这边使用的是百度地图JavaScript API v3.0版本，官网地址如下：
https://lbsyun.baidu.com/index.php?title=jspopular3.0
2.示例代码中import BMap from 'BMap'是引入百度地图API模块，先申请key，这边就不过多描述了，跟着上面官网操作即可，vue中使用百度地图API可参考我这篇文章：
https://blog.csdn.net/qq_43651168/article/details/130090544
3.对于API中涉及的setMapType方法，请参考文档中map类的方法实现，类参考文档地址如下：
https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference_3_0.html#a0b0

实现效果如下

（效果图是GIF图片，可点击放大后再次点击图片，在新窗口上阅览）

根据百度地图API自定义切换地图类型为卫星或普通相关推荐

如何在网中使用百度地图API自定义个性化地图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
百度地图api自定义修改地图背景样式
引入百度地图api就不用多说了吧! https://developer.baidu.com/map/custom/ //这个网址可以去模拟修改百度地图样式当修改到心仪的样式时,点击生成JSON,就会 ...
php网页地图上自定义,网页嵌入百度地图和使用百度地图api自定义地图的详细步骤...
在网页中插入百度地图如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击 ...
HTML调用百度地图API，实现地图标注位置
HTML调用百度地图API,实现地图标注位置一.说明二.代码总结提示:以下是本篇文章正文内容,下面案例可供参考一.说明通过HTML调用百度地图API,在指定位置显示出地图,并且在目标位置标 ...
python 实现对地图的点击_利用python和百度地图API实现数据地图标注的方法
如题,先上效果图: 主要分为两大步骤使用python语句,通过百度地图API,对已知的地名抓取经纬度使用百度地图API官网的html例程,修改数据部分,实现呈现效果一.使用python语句,通过 ...
使用vue+腾讯地图API GL实现地图选房的功能
使用vue+腾讯地图API GL实现地图选房的功能背景介绍公司最近想做一个地图选房的功能,在网上找了很久也没有找到这方面的demo,就只好硬着头皮自己写一个地图选房的功能腾讯地图的官方文档.首先 ...
调用腾讯地图API、高德地图API 获取当前地理位置、经纬度
调用腾讯地图API.高德地图API 获取当前地理位置.经纬度 web开发中,很多情况下都会需要获取当前位置的经纬度,在网上找了几个不同的地图,最终找到兼容比较好的腾讯地图API 1.调用腾讯地图API ...
百度地图API : 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <!DOCTYPE html> ...
百度地图API 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type=" ...

最新文章

热门文章