天天看点

NUXT.JS框架引入 腾讯地图--点击门店并且切换地图的中心点

一、首先在nuxt.config.js文件中引入腾讯地图并加上自己的申请的key.

NUXT.JS框架引入 腾讯地图--点击门店并且切换地图的中心点

 二、然后那个页面使用到地图的时候,就在那个页面的methods中封装初始化地图。

taps:如果多次调用和使用的话建议在data中注册map对象 ,初始值为null。

NUXT.JS框架引入 腾讯地图--点击门店并且切换地图的中心点

设置放置地图容器的DOM节点的id="container"

 center是默认中心点坐标,也可以获取个人位置的经纬度然后设置成中心点。

zoom是地图缩放的级别。

三 、然后再mounted钩子函数中调用初始化地图的函数:

NUXT.JS框架引入 腾讯地图--点击门店并且切换地图的中心点

 这时候都能在屏幕上看到地图了!!

四、  想要灵活更改地图的中心点的同学看这里

更改地图的中心点坐标的话,需要将当前门店的经纬度传递过来,最最重要的一点是要使用腾讯地图的setCenter的方法,因为在上方已经在页面注册了map 的实例所以可以直接使用。

NUXT.JS框架引入 腾讯地图--点击门店并且切换地图的中心点

item为你传递过来的经纬度信息。判断当传入的坐标为0的时候显示默认的经纬度来当前做中心点。否则地图会变成白屏哦!!!

继续阅读