标签：uniapp script ak map bmap mymap Android 百度

效果图

1.在util下建一个map.js

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}&mcode=35:81:1C:D3:2A:63:FB:6B:6E:1C:D4:F7:81:DF:A5:1B:89:57:83:91;uni.UNI342DC80&callback=init`	
    script.onerror = reject
    document.head.appendChild(script)
  })
}

2.在要显示地图的页面map.vue 引入 import { mymap } from “@/util/map.js”;

<template>
	<view class="global">
		<view class="header">															
			<view id="allmap" class="map"></view>
		</view>		
	</view>
</template>

<script>	
	export default {		
		data() {
			return {
							
			}
		},		
		mounted() {
						
		},
		methods: {			
			
		}
	}
</script>

<script module="map" lang="renderjs">
	import { mymap } from "@/util/map.js";	
	var bmap = null;
	export default {
		data() {
			return {
				ak: '百度密钥'
			}
		},
		mounted() {				
				// ================百度地图==================
				mymap(this.ak).then((mymap) => {
					// 创建百度地图实例				
					bmap = new BMapGL.Map("allmap");
					console.log(bmap, 'this.map ')
					var point = new BMapGL.Point(120.52679016380534, 31.304840401001357);
					bmap.centerAndZoom(point, 10); //设置缩放级别	
					bmap.setTilt(43);//设置倾斜角度
					bmap.setHeading(24.5);   //设置地图旋转角度		
					bmap.enableScrollWheelZoom();
					bmap.setMapStyleV2({
						styleId: '自定义样式的id' //百度开放平台搜搜个性化地图
					});											
				});
		},
		methods: {			
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				
				// app端监听数据变化调用方法								
			},			
			onClick(event, ownerInstance) {
				// 调用 service 层的方法					
			},			
		}
	}
</script>
<style>	
<style lang="scss" scoped>
	.map {
		width: 100%;
		height: 500px;
	}
	
</style>

标签：uniapp,script,ak,map,bmap,mymap,Android,百度
来源： https://blog.csdn.net/m0_67401499/article/details/123216563

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。