vue使用腾讯地图定位

首先搭建一个vue项目，在index.html里面引入腾讯地图的资源包

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=秘钥"></script>

html页面当中使用

<div class="venue-img" id="container">

js代码

var geocoder = new qq.maps.Geocoder();
var aaa = geocoder.getLocation(详细地址);
geocoder.setComplete(function(result) {
// alert(result.detail.location);
var myLatlng = new qq.maps.LatLng(
result.detail.location.lat,
result.detail.location.lng
);
//定义工厂模式函数
var myOptions = {
zoom: 15, //设置地图缩放级别
center: myLatlng, //设置中心点样式
mapTypeId: qq.maps.MapTypeId.ROADMAP, //设置地图样式详情参见MapType
disableDefaultUI: true //禁止所有控件
};

//获取dom元素添加地图信息
var map = new qq.maps.Map(
document.getElementById("container"),
myOptions
);
var marker = new qq.maps.Marker({
position: myLatlng,
map: map
});
});
//若服务请求失败，则运行以下函数
geocoder.setError(function() {
alert("出错了，请输入正确的地址！！！");
});