vue-element-admin 引入腾讯地图

vue tytrock ⋅ 于 2023-06-01 15:32:54 ⋅ 754 阅读

1、在public的index.html里引入腾讯地图的js

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你申请的key"></script>


2、在vue页面里创建一个容器

<template>
    <div id="container" style="width:600px;height:500px;"></div>
</template>


3、methods里建立创建地图的方法

setMap() {
    //步骤:定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
    //设置地图中心点
    var myLatlng = new qq.maps.LatLng(this.latitude,this.longitude);
    //定义工厂模式函数
    var myOptions = {
        zoom: 13,               //设置地图缩放级别
        center: myLatlng,    //设置中心点样式
        mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
    }
    // //获取dom元素添加地图信息
    var map = new qq.maps.Map(document.getElementById("container"), myOptions);
}


4、执行方法

mounted(){
    this.setMap();
}



参考:

https://www.cnblogs.com/TreeCTJ/p/13150851.html

回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
    Ctrl+Enter