腾讯地图–地图标记
前期准备工作在
腾讯地图--地图展示
一文中即可查看
带有显示多个标记与图文标记
<template>
<div class="container">
<el-button type="primary" @click="MultipleMark">显示多个标记</el-button>
<el-button type="primary" @click="text">图文标记</el-button>
<!-- 地图容器 -->
<div id="map-mark"></div>
</div>
</template>
<script>
export default {
data(){
return{
map:null,
longitude:39.916527,//经度
latitude:116.397128,//纬度
}
},
created(){
},
mounted(){
this.initMap()
},
methods:{
initMap(){
this.map = new window.TMap.Map(document.getElementById('map-mark'), {
center: new window.TMap.LatLng(this.longitude, this.latitude),//设置地图中心点坐标
zoom: 10, //设置地图缩放级别
pitch: 43.5, //设置俯仰角
rotation: 45 //设置地图旋转角度
});
// 标记
this.mark()
},
// 标记
mark(arr){
var geo = [
{
// id: '1',
styleId: 'myStyle',
position:new window.TMap.LatLng(this.longitude, this.latitude), // 点标记的坐标位置
}
]
if(arr){
arr.forEach(item=>{
geo.push({
// id: item.id ? item.id + '' : '1',
styleId: item.styleId ? item.styleId : 'myStyle', // 指定样式id
position: new window.TMap.LatLng(item.longitude, item.latitude), // 点标记的坐标位置
content: item.text ? item.text : ''
})
})
}
// 标记
new window.TMap.MultiMarker({
// 标记的位置
map: this.map,
// 设置点标记样式
styles:{
'myStyle':new window.TMap.MarkerStyle({
//图片样式配置参数
// src: require('../../assets/tengxun/定位.png'), //图片路径
width: 25, //图片宽度(单位为像素,默认为图片原宽度)
height: 35, //图片高度(单位为像素,默认为图片原高度)
opacity: 0.9, //图片透明度(默认为1,保持原透明度)
// faceTo: 'map', //图片保持贴地(默认图片直立朝向屏幕)
//文字样式配置参数
size: 16, //文字大小
color: '#007ACC', //文字颜色
strokeWidth: 2, //文字描边宽度
strokeColor: '#fff', //文字描边颜色
direction: 'top', //文字相对于图片的位置
}),
},
// 点标记数据数组
geometries: geo
})
},
// 显示多个标记
MultipleMark(){
var lang = [ // 再加两个坐标(坐标乱写的)
{id:2,longitude:39.994104,latitude:116.287503},
{id:3,longitude:39.954104,latitude:116.357503}
]
this.mark(lang)
},
// 图文标记
text(){
var lang = [ // 再加两个坐标(坐标乱写的)
{id:2,longitude:39.994104,latitude:116.287503,text:'标记点一'},
{id:3,longitude:39.954104,latitude:116.357503,text:'标记点二'}
]
this.mark(lang)
},
}
}
</script>
<style>
</style>
运行展示