uniapp简单使用百度地图

uniapp简单使用百度地图
一、先去百度开放平台https://ai.baidu.com/注册一下账号，在进行个人认证或者企业认证，拿到使用百度地图的AK密钥（过程不细说，可自行网上找教程）。

二、在自己的uniapp项目中公共文件夹中（一般是common），创建一个AMap.js文件。

//为了提高性能，可采用局部引入

export const BaiDuMap = function() {
	return new Promise(function(resolve, reject) {
        let ak = '申请的百度AK密钥';
        if(!isIncludeBaiduSrc()) {
            window.init = function() {
                resolve(BaiDuMap);
            }
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src =
                `https://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);
        } else {
            resolve();
        }
	})
}

// 判断是否引入了这个百度地图的script标签
function isIncludeBaiduSrc(){
    let srcName = 'https://api.map.baidu.com/api';
    let es = document.getElementsByTagName('script');
    let sign = false;
    for ( let i = 0; i < es.length; i++) {
        if (es[i]['src'].indexOf(srcName) != -1) {
            sign = true;
            break;
        } else {
            sign = false;
        }
    }
    return sign;
}

三、然后在需要用到地图的.vue文件的添加如下代码。

<template>
    <view>
    	   <div id="allmap"></div>
    </view>
</template>

import { BaiDuMap } from '@/common/js/AMap.js';
export default {
	data() {
        return {
            
        };
    },
    onLoad(opt) {
        this.getLocalCity();
    },
     methods: {
				// 定位
	        getLocalCity() {
	        		BaiDuMap().then(()=>{
                     let map = new BMapGL.Map("allmap");
                     let point = new BMapGL.Point(116.331398,39.897445);
                     map.centerAndZoom(point,12);
                     
                     let geolocation = new BMapGL.Geolocation();
                     geolocation.getCurrentPosition(function(){
                         if(this.getStatus() == BMAP_STATUS_SUCCESS){
                             let mk = new BMapGL.Marker(r.point);
                             map.addOverlay(mk);
                             map.panTo(r.point);
                             console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
                         }
                         else {
                             alert('failed' + this.getStatus());
                         }        
                     });
                 })
	        }
		}
},