引入百度

落日与鲸

2025-02-24 d3d53771dcc5fc20af4a8184826624017ed446e9

引入百度

 H5/index.html

@@ -9,6 +9,7 @@
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=W3x8DhCWKc2UFIwYgclpRBdL6BeGLLQt"></script>
    <title></title>
    <!--preload-links-->
    <!--app-context-->

 H5/pages/location/location.vue

@@ -5,7 +5,7 @@
                <image src="/static/location/back.png" class="w-19 h-35" mode=""></image>
            </view>
        </u-navbar>
        <map id="map" longitude="113.324520" latitude="23.099994" scale="14"></map>
        <div id="baidu-map"></div>

        <view class="">
            <view class="searchMain mb-35">
@@ -18,12 +18,12 @@
                        确定
                    </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>

@@ -37,12 +37,27 @@
                latitude: 39.909,
                longitude: 116.39742,
            };
        },
        mounted() {
            this.initMap();
        },
        methods: {
            initMap() {
                // 创建地图实例
                const map = new BMapGL.Map('baidu-map');
                // 设置中心点坐标
                const point = new BMapGL.Point(116.404, 39.915);
                // 初始化地图，设置中心点和缩放级别
                map.centerAndZoom(point, 15);
                // 开启鼠标滚轮缩放
                map.enableScrollWheelZoom(true);
            }
        }
    }
</script>

<style lang="scss" scoped>
    map {
    #baidu-map {
        width: 100vw;
        height: 517rpx;
    }