如何使用uniapp创建百度地图-uni-app-PHP中文网

如何使用uniapp创建百度地图

PHPz

发布： 2023-04-18 18:21:17

原创

3085人浏览过

随着移动设备的普及，地图功能已经成为很多应用的必备项。百度地图是国内使用最广泛的地图系统之一，而uniapp是一种基于vue.js的跨平台框架，可以使用同一套代码编写ios、android、h5等多个平台的应用程序。本文将介绍如何使用uniapp创建百度地图。

一、创建uniapp项目

首先需要安装HBuilderX，然后打开HBuilderX，选择创建新项目 -> uni-app。填写基本信息后，点击创建即可。

二、引入百度地图

添加ivi-baidumap组件

进入uniapp项目，打开main.js，引入ivi-baidumap组件

import iviBaidumap from '@/components/ivi-baidumap/ivi-baidumap.vue'
Vue.component('ivi-baidumap', iviBaidumap)

登录后复制

设置密钥

在uniapp项目中，打开文件config.js，添加如下内容：

baiduMap:{
    ak:'your appkey' 
}

登录后复制

其中“your appkey”为申请的百度地图AK。

三、创建地图

百度妙笔

百度旗下AI创意生成平台

443

查看详情

创建页面

在uniapp项目中，打开pages文件夹，新建一个地图页面。

编写代码

在地图页面中，打开index.vue，编写如下代码：

<template>
    <view style="width:100%;height:100%">
        <ivi-baidumap :id="'mapid'" :latitude="latitude" :longitude="longitude" :markers="markers" @click="onMapClick" @markertap="onMarkerTap"></ivi-baidumap>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                latitude:"",
                longitude:"",
                markers:[{
                    id:0,
                    latitude:39.916666,
                    longitude:116.383333,
                    iconPath:"../../static/imgs/marker_red.png",
                    width:20,
                    height:20,
                    callout:{
                        content:"第一个标记点"
                    },
                    title:"点1"
                },{
                    id:1,
                    latitude:39.906666,
                    longitude:116.375555,
                    iconPath:"../../static/imgs/marker_blue.png",
                    width:20,
                    height:20,
                    callout:{
                        content:"第二个标记点"
                    },
                    title:"点2"
                }]
            }
        },
        mounted() {
            this.$refs.mapid.getBaiduMapSdk((BMap) => {
                let map = new BMap.Map('mapid');
                let point = new BMap.Point(116.384615, 39.910937);
                map.centerAndZoom(point, 15);
                map.enableScrollWheelZoom(true);
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.ScaleControl());
            })
        },
        methods: {
            onMapClick() {
                console.log("onMapClick")
            },
            onMarkerTap(marker) {
                console.log("onMarkerTap", marker)
            }
        }
    }
</script>

登录后复制

代码解释：

ivi-baidumap：百度地图的组件标签
id：地图的唯一标识符
latitude、longitude：地图初始显示的中心点位置（维度、精度）
markers：标记点数组，用来在地图上标记位置
BMap.Map：创建地图实例，传入地图的唯一标识符
BMap.Point：创建点实例，表示地图的中心点位置
map.centerAndZoom：设置地图中心点和缩放比例
map.enableScrollWheelZoom：开启地图鼠标滚轮缩放
map.addControl：添加控件（导航、比例尺）

编写完成后，运行uniapp项目，即可看到创建的百度地图。

四、总结

本文介绍了如何在uniapp中创建百度地图，并对关键代码进行了详细的解释。通过以上步骤，可以轻松实现移动端地图功能。当然，实际使用中还有很多细节需要注意，我们需要进行进一步的学习和实践。

以上就是如何使用uniapp创建百度地图的详细内容，更多请关注php中文网其它相关文章！