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

这篇具有很好参考价值的文章主要介绍了uniapp上高德(百度)地图API的使用(APP安卓)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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

目前有两种解决方式:

  1. 使用uniapp的web-view方式(百度地图)

  1. 使用renderjs来调用document等js对象(高德地图)


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

  1. 首先新建一个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.设置顶部栏

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

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

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

①引入axios

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

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

(1)uniapp页面传递token以及ip地址

map.vue

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

(2)html页面获取uniapp传递的数据

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

(3)调用接口

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

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

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

(5)调用方法

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

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

①添加div容器和data数据

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

②为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方法

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

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

  1. 点击筛选图标,触发事件,跳转到筛选页面

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

2.筛选页面

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

3.在uniapp的页面接收filter

pages/map/index

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

4.将filter发送给html页面

pages/map/index

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

5.在html页面接收

map.html

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

6.调用筛选方法

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

7.定义筛选方法

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

注意:使用此方法有延迟问题,建议使用方法二


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

  1. 定义基本结构

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);
            },
            // 引入高德地图SDK
            init(){
                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里面调用后台接口,获取图标信息

Ⅰ.引用后台接口方法

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

Ⅱ.定义获取图标方法

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

Ⅲ.调用方法

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

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

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

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

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

Ⅰ.定义base64图标

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

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

Ⅲ.地图上添加图标

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

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

①弹出框html结构

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

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

③接收id,并调用接口,获取弹出框信息(自己的script)

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

至此,两种方法实现地图已经完成。文章来源地址https://www.toymoban.com/news/detail-409026.html

到了这里,关于uniapp上高德(百度)地图API的使用(APP安卓)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包