<template>
|
<view class="content">
|
<u-navbar title="选择地点" bgColor="transparent" titleStyle="font-size: 35rpx;font-weight:bold;" placeholder>
|
<view slot="left">
|
<image src="/static/location/back.png" class="w-19 h-35" mode=""></image>
|
</view>
|
</u-navbar>
|
<div id="map-container"></div>
|
|
<view class="">
|
<view class="searchMain mb-35">
|
<view class="search fs-27 ">
|
<text class="mr-35 ml-50">成都市</text>
|
<image class="w-17 h-8 mr-35" src="/static/location/toleft.png" mode=""></image>
|
<image class="w-31 h-31 mr-13" src="/static/location/search.png" mode=""></image>
|
<input class="flex1" placeholder="搜索小区/写字楼等" placeholder-style="font-size:27rpx"></input>
|
<view class="sure">
|
确定
|
</view>
|
</view>
|
|
</view>
|
<view class="card" :class="" v-for="item in 5">
|
<text>天府新谷九号楼二单元</text>
|
<text class="font-w500 fs-23 mt-25" style="color: rgba(0, 0, 0, 0.6);">四川省成都市高新区府城大道西段399号天</text>
|
|
</view>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
function loadBaiduMapSDK() {
|
return new Promise((resolve, reject) => {
|
const script = document.createElement('script');
|
script.src = 'https://api.map.baidu.com/api?v=3.0&ak=W3x8DhCWKc2UFIwYgclpRBdL6BeGLLQt';
|
script.onload = resolve;
|
script.onerror = reject;
|
document.head.appendChild(script);
|
});
|
}
|
|
export default {
|
data() {
|
return {
|
latitude: 39.909,
|
longitude: 116.39742,
|
};
|
},
|
onLoad() {
|
loadBaiduMapSDK()
|
.then(() => {
|
const map = new BMapGL.Map('map-container');
|
// 其他初始化操作
|
})
|
.catch((error) => {
|
console.error('百度地图 SDK 加载失败:', error);
|
})
|
},
|
|
methods: {
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
#map-container {
|
width: 100vw;
|
height: 517rpx;
|
}
|
|
.content {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.searchMain {
|
padding-left: 40rpx;
|
padding-right: 40rpx;
|
border-radius: 40rpx;
|
|
.search {
|
width: 669rpx;
|
height: 77rpx;
|
background: #FFFFFF;
|
border-radius: 38rpx;
|
border: 2rpx solid #DADADA;
|
display: flex;
|
|
align-items: center;
|
justify-content: space-between;
|
}
|
}
|
|
|
.sure {
|
width: 104rpx;
|
height: 69rpx;
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
border-radius: 48rpx;
|
font-weight: 500;
|
font-size: 23rpx;
|
color: #FFFFFF;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.card {
|
display: flex;
|
flex-direction: column;
|
font-weight: 800;
|
font-size: 31rpx;
|
color: rgba(0, 0, 0, 0.8);
|
padding: 34rpx 38rpx 33rpx 38rpx;
|
background: #F2F2F2;
|
border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);
|
}
|
</style>
|
