引入

在index.html文件中引入腾讯地图js文件，XXX为你申请的key

注意事项：为显示地图的元素设置宽高

单个标注点

js: 在mounted生命周期或者从后台接口获得信息后调用初始化地图方法

initMap (latitude, longitude, message) {

    // 中心坐标    var center = new qq.maps.LatLng(latitude, longitude);    var map = new qq.maps.Map(        document.getElementById("container"),        {            center: center,            // 缩放级别            zoom: 13        }    );    // 创建标记    var marker = new qq.maps.Marker({        // 标记的位置        position: center,        map: map    });    // 提示窗    var info = new qq.maps.InfoWindow({        map: map    });    // 悬浮标记显示信息    qq.maps.event.addListener(marker, 'mouseover', function() {                info.open();        info.setContent(`

${message}

`); info.setPosition(center); }); qq.maps.event.addListener(marker, 'mouseout', function() { info.close(); });},

多个标注点

存放标注点数组的格式：

markers: [

    {        "id":1,        "name":"北京后海酒店",        "latitude":"39.92300000",        "longitude":"116.5200000000"    },    {        "id":2,        "name":"北京七天酒店",        "latitude":"39.9254100000",        "longitude":"116.5220000000"    }]

方法：

initMap (arr) {

    // 默认以数组第一项为中心    var center = new qq.maps.LatLng(arr[0].latitude, arr[0].longitude);    var map = new qq.maps.Map(        document.getElementById("container"),        {            center: center,            zoom: 13        }    );    // 提示窗    var info = new qq.maps.InfoWindow({        map: map    });    for (var i = 0; i

${this.name}

`); // 提示窗位置 info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng)); }); qq.maps.event.addListener(marker, 'mouseout', function() { info.close(); }); }}

vue中使用百度地图为啥是空白_vue中使用腾讯地图（尝试篇）相关推荐

echarts地图文字重叠解决方案_vue中使用echarts地图且修改地图文字位置
使用echarts地图的时候,从阿里云地图选择器下载完对应省份的geojson之后,在页面中显示,会出现一些地市名字覆盖的情况,可以直接修改geojson中的数据对文字的位置进行修改解决方法打 ...
vue如何使用原生js写动画效果_Vue中的动画效果
Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...
vue 动态获取的图片路径不显示_Vue中img的src是动态渲染时不显示的解决
Vue中img的src是动态渲染时不显示的解决今天在项目中遇到一个需求,设计稿如下就是展示用户头像,数据从后端获取,要是没有拿到则显示默认图片. 项目采用vue开发,本人也是第一次在实际项目中使用 ...
vue 监听表格里的数据变化_vue中监听object数据变化的基本原理
# 简略版+自己的注释// 判断一个变量是否是对象 function isObject(obj) { return obj.constructor === Object } class Observe ...
vue 监听表格里的数据变化_vue中监听数据变化 watch
今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...
vue如何获取tree当前选中的节点_vue中element-ui 树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...
出处: Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 1 这种只有在所有子 ...
vue 表格中有列需要异步加载_Vue中使用async/await解决异步请求问题
1.async/await场景用同步的思维来解决异步问题,当前端接口调用需要等到接口返回值以后渲染页面. 2.名词解释 async async的用法,它作为一个关键字放到函数前面,用于表示函数是一个 ...
vue如何监听多个input框_vue中两个input框输入值，自动计算总和到另一个Input框，怎么实现...
computed:{ sum(){ return parseFloat(this.form.add1) + parseFloat(this.form.add2) } } v-model = 'sum' ...
清空div中的内容而不刷新整个页面_Vue中的$nextTick机制
nextTick 出现的前提因为Vue是异步驱动视图更新数据的,即当我们在事件中修改数据时,视图并不会即时的更新,而是等在同一事件循环的所有数据变化完成后,再进行视图更新.类似于Event Loop ...

vue中使用百度地图为啥是空白_vue中使用腾讯地图（尝试篇）

引入

单个标注点

多个标注点

vue中使用百度地图为啥是空白_vue中使用腾讯地图（尝试篇）相关推荐

最新文章

热门文章