vue怎么获得后台传过来的map_vue接入腾讯地图

vue接入腾讯地图

最近在使用vue接入腾讯地图也是饱受折磨，因为本身对vue就不是很会，借此机会能好好学学vue。

里面代码可能有的地方会有不妥之处，后面会改进的

一、接入腾讯地图

首先在马上开始接入 - 入门指南 | 腾讯位置服务​lbs.qq.com

，这里面申请一个key

效果图如下

1、在vue里面的index.html中引用地图

2、在vue页面中写如下代码

里面代码包含了，当前定位信息

​

let map, marker, polygon, drawingManager, lngLat,ap;

export default {

name: 'Index',

data() {

return {

position:[

{

longitude: 0,//经度 latitude:0,//纬度 city:''

}

]

};

},

methods:{

/*** /定位获得当前位置信息*/

getMyLocation() {

var geolocation = new qq.maps.Geolocation("你申请的key", "名字");

geolocation.getLocation(this.showPosition, this.showErr);

},

showPosition(position) {

console.log(position);

this.position.latitude = position.lat;

this.position.longitude = position.lng;

this.position.city = position.city;

this.setMapData();

},

//定位失败再请求定位，测试使用 showErr() {

console.log("定位失败，请重试！");

this.getMyLocation();

},

​

/*** 位置信息在地图上展示*/

setMapData() {

var myLatlng = new qq.maps.LatLng(this.position.latitude, this.position.longitude);

var myOptions = {

zoom: 16,

center: myLatlng,

mapTypeId: qq.maps.MapTypeId.ROADMAP

}

//获取dom元素添加地图信息 map = new qq.maps.Map(document.getElementById("container"), myOptions)

​

//给定位的位置添加图片标注 marker = new qq.maps.Marker({

position: myLatlng,

map: map,

draggable: true //允许鼠标拖动 })

​

},

},

​

mounted() {

this.getMyLocation();

}

}

​

#container{

width: 100%;

height: 100%;

position: absolute;

}

二、鼠标点击地图，获得相应位置信息

在vue的methods中写入此方法，再在setMapData()方法中调用此方法即可，具体情况可根据自己需求你来写，我这里是需要用这个点击鼠标获取位置信息借此跳转页面来测试其他功能

methods:{

/*** 鼠标点击获取标记位置事件*/

mouseClick () {

const _this = this

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

if(!marker) {

marker=new qq.maps.Marker({

position: event.latLng,

map:map

})

return

}

marker.setPosition(event.latLng)

_this.position.latitude = event.latLng.getLat();

_this.position.longitude = event.latLng.getLng();

})

},

},

三、在地图上搜索地点

如图

在vue中的index.html中加入

这一步很关键，因为之前我看是加入了这个cdn，但是没注意到后面还拼了个libraries=place这个，导致一直搜索不出来

然后在vue的method加入如下代码，再在setMapData()方法中调用此方法即可

template中加入如下代码

/**搜索地点 */

search(){

ap = new window.qq.maps.place.Autocomplete(document.getElementById('place'));

var keyword = "";

//调用Poi检索类。用于进行本地检索、周边检索等服务。

var searchService = new window.qq.maps.SearchService({

complete : function(results){

if(results.type === "CITY_LIST") {

searchService.setLocation(results.detail.cities[0].cityName);

searchService.search(keyword);

return;

}

var pois = results.detail.pois;

var latlngBounds = new window.qq.maps.LatLngBounds();

for(var i = 0,l = pois.length;i < l; i++){

var poi = pois[i];

latlngBounds.extend(poi.latLng);