腾讯地图插件的引用

最新推荐文章于 2024-08-28 22:12:45 发布

隔壁老洋

最新推荐文章于 2024-08-28 22:12:45 发布

阅读量1k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_43453916/article/details/90208005

版权

笔记专栏收录该内容

91 篇文章 0 订阅

订阅专栏

在这里插入图片描述
在HTML页面引用

    </div>
</template>

<script>

    export default {
        name: "dataRequest",
        data(){
            return {

            }
        },
        created(){

        },
        mounted(){
            this.init();
        },
        methods:{
            init() {
                //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
                //设置地图中心点
                var myLatlng = new qq.maps.LatLng(39.916527,116.397128);
                //定义工厂模式函数
                var myOptions = {
                    zoom: 8,               //设置地图缩放级别
                    center: myLatlng,      //设置中心点样式
                    mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
                }
                //获取dom元素添加地图信息
                var map = new qq.maps.Map(document.getElementById("dataRequest"), myOptions);
                qq.maps.event.addListener(map, 'click', function(event) {
                    console.log('您点击的位置为: [' + event.latLng.getLat() + ', ' +
                        event.latLng.getLng() + ']');
                });

            }

        }
    }
</script>

<style scoped lang="less">
    #dataRequest{
        width: 100%;
        height: 500px;
    }
</style>