如何使用uniapp创建百度地图

时间：2023-04-18 23:42

随着移动设备的普及，地图功能已经成为很多应用的必备项。百度地图是国内使用最广泛的地图系统之一，而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。

三、创建地图

创建页面

在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>

代码解释：