vue项目引用腾讯地图API

编程入门行业动态更新时间:2024-10-27 02:26:29

vue项目引用<a href=https://www.elefans.com/category/jswz/34/1770070.html style= 腾讯地图API"/>

vue项目引用腾讯地图API

1 前期准备

在腾讯位置服务控制台创建应用获得key

2 引用API

vue项目根目录为project

在project/public/index.html中的<head>块引入<script charset="utf-8" src="=1.exp&key=XXXXXXXXXXXXXXX"></script>

3 在组件中使用

<template><body><div id='container'></div></body>
</template><style scoped>
#container{/*地图(容器)显示大小*/ /*设置为全屏，位于最下层*/width:100%;height:100%;position: absolute;top: 0px;  bottom: 0px;left: 0px;right: 0px;z-index: -1;
}
</style><script>
export default{data(){return{markerUrl: require("../assets/marker.png"),  // 点标记图片路径map: '',zoom: 4,  // 地图一开始的缩放级别center: new window.TMap.LatLng(39.984120, 116.307484),  // 地图一开始的中心点markerLayer: '',}},mounted(){this.initMap(this.center, this.zoom)  // 初始化页面后直接初始化地图},methods:{initMap(center, zoom) {this.map = new window.TMap.Map(document.getElementById('container'), {center: center,//设置地图中心点坐标zoom: zoom,   //设置地图缩放级别pitch: 0,  //设置俯仰角rotation: 0    //设置地图旋转角度});this.markerLayer = new window.TMap.MultiMarker({  // 创建标记层map: this.map,  //指定地图容器geometries: [],styles: {  // 点标记样式"mystyle": new window.TMap.MarkerStyle({"width": 20,"height": 20,"src": this.markerUrl,"anchor": { x: 10, y: 10 },"opacity": 0.5})}});},// 添加点标记addPoint(point) { // 一个point需要有id和坐标this.markerLayer.add([{'id': point['id'],'styleId': 'mystyle',"position": new window.TMap.LatLng(point['latitude'], point['longitude']),"properties":{} // 自定义属性，可以没有}])},}
}
</script>