uni-app 使用百度地图

胜杰720

已于 2023-04-06 09:46:02 修改

阅读量690

点赞数 1

分类专栏： uni-app 文章标签： uni-app 前端 javascript

于 2023-02-13 14:49:29 首次发布

本文链接：https://blog.csdn.net/weixin_71574589/article/details/129008972

版权

uni-app 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该代码示例展示了如何在Vue组件中引入自定义的map.js文件，通过百度地图API创建一个WebGL地图，并添加多个标记点。map.js文件负责获取ak并异步加载地图脚本。在baiduMap.vue组件中，地图在mounted阶段初始化，并设置了缩放、倾斜和旋转角度。

摘要由CSDN通过智能技术生成

先在static 文件下建立 map.js文件

map.js

ak:自己去百度申请

export function mymap(ak) {
    return new Promise(function(resolve, reject) {
      window.init = function() {
        resolve(mymap)
      }
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
      script.onerror = reject
      document.head.appendChild(script)
    })
  }

在建立一个 baiduMap.vue 文件

<!-- 地图 -->
<template>
	<view class="global">
		<!-- <view id="allmap" class="map"></view> -->
		<view :prop="markerList" :change:prop="allmap.updateEcharts" id="allmap"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markerList: [],
			}
		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<script module="allmap" lang="renderjs">
	import { mymap } from '@/util/map.js';
	export default {
		data() {
			return {
				map: null,
				ak: 'DMabCVRC8Im8HUWLC6epbkQKz83wCuq0'                  //申请方法网上很多自行百度
			}
		},
		mounted() {
			this.$nextTick(() => {
				let _this = this;
				mymap(_this.ak).then((mymap) => {
					var map = new BMapGL.Map("allmap");
					console.log(map, 'this.map ')
					var point = new BMapGL.Point(116.404, 39.915);
					map.centerAndZoom(point, 10); //设置缩放级别	
					map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
					map.setTilt(43);//设置倾斜角度
					map.setHeading(24.5);   //设置地图旋转角度	 
					// 创建点标记
					var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925));
					var marker2 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));
					var marker3 = new BMapGL.Marker(new BMapGL.Point(116.395, 39.935));
					var marker4 = new BMapGL.Marker(new BMapGL.Point(116.415, 39.931));
					// 在地图上添加点标记
					map.addOverlay(marker1);
					map.addOverlay(marker2);
					map.addOverlay(marker3);
					map.addOverlay(marker4);
				})	
			})
		}
	}
</script>

<style>
	/* <style lang="scss"scoped>.map {
		width: 100vw;
		height: 500px;
	}

	.global {
		width: 100vw;
		height: calc(100vh - 150px);
	}

	#allmap {
		width: 100vw;
		height: calc(100vh - 150px);
	} */
	#allmap {
		width:100%;
		height: 80vh;
	}
</style>