uniapp百度地图

发布时间 2023-09-20 14:35:43作者: zjxgdq
<!-- 移动端地图 -->
<template>
    <view class="tabnav">
        <view class="tabnav-c">
            <page-head :title="state.title"></page-head>
		<view class="uni-common-mt">
			<view>
				<map :latitude="state.latitude" :longitude="state.longitude" :markers="state.covers">
				</map>
			</view>
		</view>
           
        </view>
        <Tabbar :current="1"></Tabbar>
    </view>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue'
import Tabbar from '../tabnav/index.vue'
export default defineComponent({
    components: {
        Tabbar,
    },
    setup() {
        // id:0, // 使用 marker点击事件 需要填写id
		// 	title: 'map',
			
			const state =reactive({
                title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
                covers: [{
				latitude: 39.909,
				longitude: 116.39742,
				iconPath: '../../../static/location.png'
			}, {
				latitude: 39.90,
				longitude: 116.39,
				iconPath: '../../../static/location.png'
			}]
            })
        onMounted(() => {
            
        })
        return {
            state
        }
    },
})
</script>
 
<style scoped lang="scss"></style>
 


 

  

  <script src="https://api.map.baidu.com/api?v=1.4&services=true&type=webg1&ak=NNr3GC89RHOHwpfZFz37YRQU0IC5ZLVw"></script>  

  

 "maps" : {
                    "baidu" : {
                        "appkey_ios" : "NNr3GC89RHOHwpfZFz37YRQU0IC5ZLVw",
                        "appkey_android" : "NNr3GC89RHOHwpfZFz37YRQU0IC5ZLVw"
                    }
                }