vue中使用腾讯地图api

本文详细介绍了在Vue CLI项目中如何使用腾讯地图API。首先在index.html引入地图SDK,然后在组件内创建地图实例,添加事件监听、标记、信息窗口、覆盖物、POI搜索、驾车线路规划等功能。同时,文中还提到了如何根据用户输入动态搜索和展示地图元素。
摘要由CSDN通过智能技术生成
  • 在vue-cli脚手架搭建的vue项目里使用到了腾讯地图。看了腾讯地图的官方给出的API(https://lbs.qq.com/javascript_v2/index.html)敲了一遍代码,才有点感觉写一个总结点的东西。
  • 使用前需要在index.html里引入<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>才可以使用地图。我想的是(还没开始使用)单独封装成一个组件,使用的时候再在父组件里引用;以下都是在地图组件文件(如map.vue)里写的内容。
  1. 1、模板里通过给了id(为container)的div来承载地图;

在页面挂载时就要加载地图,所以在<script>里要先初始化地图,即

mounted () {

this.init()

}

接着在methods里写init方法(以下内容都是写在init里的)。

  1. 2、开始创建地图实例,并为其添加事件、添加标记、添加信息窗口、覆盖物、以及搜索poi(如酒店的位置)、驾车线路方案、地址解析。(标记聚合点看了但不清楚用途并且感觉项目里也不会用,所以没有写出来)

//创建地图实例

var map=new qq.maps.Map(document.getElement('container'),{

center,//坐标,即最初显示的地图中心

zoom    //缩放级别,即显示的比例

})

//给地图添加事件,可以click、mouseover、mouseout等,这样的事件也可添加到marker、polyline上,即map的位置换了即可

qq.maps.event.addListener(map,'click',function(res){

//res即点击后的位置信息

})

//添加标记

var marker=new qq.ma

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值