LocalLivingServicesUniapp/pages/component/map.vue

<template>
    <view class="page-section page-section-gap">
        <map style="width: 100%; height: 218upx;" :latitude="latitude" :longitude="longitude"></map>
        <!-- <map  id="map"  style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"> -->
        <!-- </map> -->
    </view>
</template>

<script>
// import AMapLoader from '@amap/amap-jsapi-loader';
// window._AMapSecurityConfig = {
//     securityJsCode: "d62687dd438cfadd859bbab66d8e41a2",
// };
export default {
    data() {
        return {
            map: null,
            marker: null,
            id:0, // 使用 marker点击事件 需要填写id
			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'
			}]
        };
    },
    onReady() {
        // this.initMap();
    },
    methods: {
        // initMap() {
        //     console.log(222);
            
        //     AMapLoader.load({
        //         key: "18c5a399a406896c5aa53d808e401294", // 申请好的Web端开发者Key，首次调用 load 时必填
        //         version: '2.0', // 指定要加载的API的版本号，默认为 1.4.15
        //     }).then((AMap) => {
        //         this.map = new AMap.Map('amap', {
        //             zoom: 11, // 初始化地图层级
        //             center: [116.397428, 39.90923], // 初始化地图中心点位置
        //         });
        //         // this.map.on('click', (e) => {
        //         //     lngLatLng.value = e.lnglat.lng;
        //         //     lngLatLat.value =  e.lnglat.lat;
        //         //     console.log(lngLatLng.value, lngLatLat.value);
        //         //     // positionArr.value = [lngLatLng.value, lngLatLat.value]
        //         //     // addressValue.value = ""
        //         //     // if (marker.value) {
        //         //     //     marker.value.setPosition([lngLatLng.value, lngLatLat.value]);  // 更新Marker位置
        //         //     // }
        //         //     // this.emit('back', positionArr.value)
        //         // })

        //         // let auto = new AMap.AutoComplete({
        //         //     city: "太原市", // 限定城市，默认全国
        //         //     input: "search_input",
        //         // })
        //         // let placeSearch = new AMap.PlaceSearch({
        //         //     city: "太原市",
        //         //     map: this.map
        //         // });
        //         //  // 标点位置
        //         // marker.value = new AMap.Marker({
        //         //     position: [113.392517, 22.517024], //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        //         //     map: this.map, // 当操作完成时，应该将结果展示在哪个地图上
        //         // })
        //         // map.add(marker)
        //     }).catch(e => {
        //         console.error(e);
        //     });
        // }
    }
}
</script>

<style scoped>
.content {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>