前言

由于在app中没有document,window等对象，所以使用在pc端传统方法引入的方式，将会发现无法引用成功，会出现白屏现象。

目前有两种解决方式：

使用uniapp的web-view方式（百度地图）

使用renderjs来调用document等js对象（高德地图）

一、使用uniapp的web-view方式(百度地图)

首先新建一个uniapp的页面，并在里面使用webview组件

map.vue:

<template><view><view class="page-body"><web-view  :src='remoteUrl'></web-view></view></view>
</template>

<script  >
export default {created () {this.remoteUrl = `/static/html/map.html`;},data () {return {remoteUrl: '',}},
}
</script>

<style>
.page-body {width: 100vw;height: 100vh;
}
</style>

2.然后我们在static/html下新建基本的map.html页面

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>webview百度地图</title><style type="text/css">html {height: 100%}body {height: 100%;margin: 0px;padding: 0px;}#mapPage {width: 100vw;height: 100vh;position: relative;}#container {width: 100vw;height: 100vh;}</style></head><body><div id='mapPage<div id='container'></div></div></body><!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 --><!-- <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> --><!-- uni 的 SDK --><script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script><!-- 百度地图 --><script type="text/javascript"src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=你的ak"></script><!-- vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script><script type="text/javascript">document.addEventListener('UniAppJSBridgeReady', function() {const vm=new Vue({el:'#mapPage',data:{map: null, },methods:{initMap(){this.map = new BMapGL.Map("container"); // 创建地图实例let point = new BMapGL.Point(121.664985,29.971749); // 创建点坐标 this.map.centerAndZoom(point, 13); // 初始化地图，设置中心点坐标和地图级别this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放                },},mounted(){this.initMap();                    }})            });     </script></html>

3.设置顶部栏

中间实时显示地图上图标的个数，以及一个筛选按钮（可以跳转其他页面之后，对地图上图标进行筛选，筛选后进入地图页面）

4.从后台接口中获取到图标信息，在地图上放置自定义图标

①引入axios

②创建方法getPointData,获取图标数据

（1）uniapp页面传递token以及ip地址

map.vue

（2）html页面获取uniapp传递的数据

（3）调用接口

（4）根据接口返回的数据添加不同图标并添加标注

（5）调用方法

5.为marker添加点击事件，弹出该marker的详细信息

①添加div容器和data数据

②为div添加内容

        showDetail (value) {this.detail = {}; this.showDialog = true;axios.request({methods: 'get',url: obj.BASE_URL + '/app/info',headers: {'Authorization': 'Bearer ' + obj.token,},params: {Id: value,}}).then((res) => {this.detail = res.data.data;}).catch((res) => { });},closeDetail () {this.showDialog = false;},

③点击事件触发showDetail方法

至此，该地图基本功能完成。后续将介绍顶部栏的筛选

点击筛选图标，触发事件，跳转到筛选页面

2.筛选页面

3.在uniapp的页面接收filter

pages/map/index

4.将filter发送给html页面

pages/map/index

5.在html页面接收

map.html

6.调用筛选方法

7.定义筛选方法

注意：使用此方法有延迟问题，建议使用方法二

二、使用renderjs来调用document等js对象（高德地图）

定义基本结构

html:

<template><view><view class="page-body"><view :msg="msg":change:msg="amap.receiveMsg":currentIndex="currentIndex":change:currentIndex="amap.currentIndexChange"id="amap"></view></view></view>
</template>

render.js

<!-- render.js -->
<script module="amap" lang="renderjs">export default{data(){return{map:null,myData:[],}},methods:{receiveMsg(newValue,oldValue,ownerInstance,instance){console.log(newValue);},currentIndexChange(val){console.log(val);},// 引入高德地图SDKinit(){if(typeof window.AMap=='function'){this.initAmap();}else{// 动态引入较大类库避免影响页面展示const script =document.createElement('script');script.src='https://webapi.amap.com/maps?v=1.4.15&key=你的key';script.onload=this.initAmap.bind(this);document.head.appendChild(script);}},//初始化地图initAmap(){this.map=new AMap.Map('amap',{resizeEnable:true,center:[121.664985,29.971749],zooms:[14,20],//设置地图级别范围zoom:15,})this.map.on('complete',()=>{console.log('加载完成')})},}
}
</script>

自己的script

<script>
export default {data () {return {pointData: [],current: 0,}},computed: {msg () {return this.pointData},currentIndex () {return this.current}},methods: {},
}
</script>

2.为地图添加坐标

①在自己的script里面调用后台接口，获取图标信息

Ⅰ.引用后台接口方法

Ⅱ.定义获取图标方法

Ⅲ.调用方法

②将坐标信息传递给renderjs(renderjs)

③在地图上添加图标(renderjs)

注意：如果图标路径采用相对路径，自定义图标可能加载不出来，建议将图标转换为base64格式

Ⅰ.定义base64图标

Ⅱ.清除地图上原有图标，初始化图标数据

Ⅲ.地图上添加图标

3.为图标添加点击事件，显示弹出框

①弹出框html结构

②定义点击事件，将当前图标上的唯一标识传递给自己的script(renderjs)

③接收id，并调用接口，获取弹出框信息（自己的script）

至此，两种方法实现地图已经完成。

uniapp上高德（百度）地图API的使用(APP安卓)相关推荐

微信小程序报错百度地图API 报错 “APP 服务被禁用“
最近开发微信小程序时,想使用百度地图制作定位功能,结果一直报错"APP服务被禁用",查了好多资料都不行,改成服务端也不行,终于,我在参考了以下这位大佬的博客之后成功用上了百度地图. ...
使用高德(百度)地图API
以高德地图为例: 高德地图API官网申请key; 在index.html中引入: 如果是Vue-cli2,在build/webpack.base.conf.js中的module.exports={}中 ...
php百度地图接口两点测距,百度地图Api 根据两个坐标点计算距离
百度地图Android Sdk的Api里面,没有现成的直接获取两个坐标点之间距离的方法,但是,在jsapi里面,有直接计算距离的方法. class Point: pass def max(a,b): ...
python爬取地图上的经纬度_Python调用百度地图API爬取经纬度
作者:国服帅座经济学在读硕士微信公众号:统计之家你吃肯德基,我点麦当劳.本是替代品,却众口难调.每个人都有独特的偏好,都有一份要坚守的情怀.高德与百度,你心仪哪款呢? 认识百度地图API 百度 ...
Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API
Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 ...
基于uni-app与百度地图API实现简易前后端分离的地理围栏应用
一.引言地理围栏(Geo-fencing)是LBS 的一种新应用,就是用一个虚拟的栅栏围出一个虚拟地理边界.当手机进入.离开某个特定地理区域,或在该区域内活动时,后台可以感知到这一变化,同时手机可以 ...
地图上制作线路的动画_使用百度地图API制作线路轨迹播放
1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次 ...
百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数 ...
【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍
一.如何进行标注 1.首先,我们需要找准标注的位置.比如,我想标注"中央民族大学"附近的网球场.那么,我转到坐标拾取工具页面,请点击http://openapi.baidu.com ...

uniapp上高德（百度）地图API的使用(APP安卓)

一、使用uniapp的web-view方式(百度地图)

首先新建一个uniapp的页面，并在里面使用webview组件