Vue引入腾讯地图

  1. 在public目录下的index.html文件中加入以下代码
//引入腾讯地图服务
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key= 腾讯地图-控制台-添加应用生成的key "></script>
//引入腾讯地图的前端定位组件
<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
  1. 创建一个vue组件,在其中为地图添加一个容器
<div id="container" style="width:100%;height:300px;"></div>
  1. 地图初始化文件如下
initMap(){
  //使用腾讯的前端定位组件,比浏览器中的HTML5 Geolocation定位能力强
  var geolocation = new qq.maps.Geolocation("自己的key", "组件名");
  geolocation.getLocation(onSuccess,onFail)
  function onSuccess(position){
    //步骤:定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
    //设置地图中心点
    var myLatlng = new qq.maps.LatLng(position.lat,position.lng);
    //定义工厂模式函数
    var myOptions = {
      zoom: 18,               //设置地图缩放级别
      center: myLatlng,      //设置中心点
      mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
    }
    //获取dom元素添加地图信息
    var map = new qq.maps.Map(document.getElementById("container"), myOptions);

    //添加地图标点 => 单点
    var marker = new qq.maps.Marker({
      position: myLatlng ,
      map: map
    });
  }
}
  1. 在create()中调用初始化方法
  2. 效果如下
posted @   程长新  阅读(1075)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示