H5腾讯地图开发

发表于 | 分类于 ，

前期设置

增加key

登陆腾讯lbs官网网站 微信登陆，注册一个key

地图经纬度换算

地图官方JS库添加

  • 载入地图js
    1
    <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=注册的key"></script>

地图显示

基本地图设置

  • 地图显示部分
1
2
<!-- 地图部分 -->
<p id="container"></p>
  • 地图设置部分
1
2
3
4
5
6
7
8
9
//默认中心点经纬度
var lng = '经度';
var lat = '纬度';

var center = new TMap.LatLng(lng, lat);
var map = new TMap.Map("container", {
     center: center,
     zoom: 9			//地图放大数
});

标记显示

  • 多个标记
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var marker = new TMap.MultiMarker({
	id: 'marker-layer',
	position: center,
	map: map,
    
    //标记点配置
	styles: {
	    "marker": new TMap.MarkerStyle({
        	//标记宽度
        	"width": 25,
        	//标记高度
	        "height": 35,
            //定位点相对坐标
	        "anchor": { x: 16, y: 32 },
            //对齐方式
	        "direction": "top"
            //标记图标自定义
	        // "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
	    })
	},
    
    // 多个定位点
	geometries: [
		{
		    "id": 自定义id1,
		    "styleId": 'maker',
            // 定位点经纬度
		    "position": new TMap.LatLng(lng, lat)
		},
        {
		    "id": 自定义id2,
		    "styleId": 'maker',
            // 定位点经纬度
		    "position": new TMap.LatLng(lng, lat)
		}
	]
});
  • 多点文本标签（标记与文字标签只能二选一)

标签的问题就是无法支持完整的html结构，不能用css，只能用一些基本的文字样式设定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 继承多点文本标签并做扩展
var label = new TMap.MultiLabel({
    id: 'label-layer',
    map: map,
    styles: {
      'label': labelColor('#000000')
    },
    // 多点标签
    geometries:[
    {
        "id": "label_1",
        'styleId': 'label',
        "position": new TMap.LatLng(31.18667, 121.42894),
        "content": "喜盈门店"
    }
    ]
});

// 设定标记的样式
function labelColor(color) {
    return new TMap.LabelStyle({
        'color': color, //颜色属性
        'size': 16, //文字大小属性
        'offset': {
            x: 0,
            y: -70
        }, //文字偏移属性单位为像素
        'angle': 0, //文字旋转属性
        'alignment': 'center', //文字水平对齐属性
        'backgroundColor': 'rgba(255,255,255,255)',
        'borderWidth': 1,
        'verticalAlignment': 'middle' //文字垂直对齐属性
    })
}
  • 自定义扩展文本标签，解决了原本标签无法设置html的方式，通过动态加入dom来解决
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
class LabelCluster extends TMap.DOMOverlay {
	constructor (options) {
	  super(options)
	  // 移动端touchmove事件执行时需禁止触发touchend
	  this.enableClick = true
	}

	onInit (options) {
	  this.content = options.content
	  this.position = options.position
	}

	// 销毁时需要删除监听器
	onDestroy () {
	  this.dom.removeEventListener('click', this.onClick)
	  this.dom.removeEventListener('touchend', this.onTouchEnd)
	  this.dom.removeEventListener('touchmove', this.onTouchMove)
	  this.removeAllListeners()
	}

	// 点击事件
	onClick (e) {
	  this.emit('click', e)
	}

	// 移动端触摸结束事件
	onTouchEnd (e) {
	  // 移动端的触摸移动后禁止触发touchend事件
	  if (!this.enableClick) {
	    this.enableClick = true
	    return
	  }
	  this.emit('touchend', e)
	}

	// 移动端触摸移动事件
	onTouchMove (e) {
	  // 移动端的触摸移动后禁止触发touchend事件
	  this.enableClick = false
	  this.emit('touchmove', e)
	}

	// 创建气泡DOM元素
	createDOM () {
	  var dom = document.createElement('div')
	  // 设置DOM样式
	  dom.style.cssText = 'max-height:135px;max-width:440px;padding:15px;background:#fff;border:#ccc solid 1px;font-weight:bold;line-height:30px;font-size:15px;'
	  dom.innerHTML = this.content;

	  // 监听点击事件，实现zoomOnClick
	  this.onClick = this.onClick.bind(this)
	  this.onTouchEnd = this.onTouchEnd.bind(this)
	  this.onTouchMove = this.onTouchMove.bind(this)
	  // pc端注册click事件，移动端注册touchend事件
	  dom.addEventListener('click', this.onClick)
	  dom.addEventListener('touchend', this.onTouchEnd)
	  dom.addEventListener('touchmove', this.onTouchMove)
	  return dom
	}

	// 更新
	updateDOM () {
	  if (!this.map) {
	    return
	  }
	  // 经纬度坐标转容器像素坐标
	  const pixel = this.map.projectToContainer(this.position)

	  // 使文本框中心点对齐经纬度坐标点
	  const left = pixel.getX() - this.dom.clientWidth / 2 + 'px'
	  const top = pixel.getY() - this.dom.clientHeight / 2 + 'px'
	  this.dom.style.transform = `translate(${left}, ${top})`

	  this.emit('dom_updated')
	}
}

var label = new LabelCluster({
	map: map,
    // 设置信息框位置
	position: center, 
    // 设置信息框内容
	content: '<div style=padding-top:5px;>重庆园博园店</div><div></div><div>ww</div>' 
});

信息窗口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var infoWindow  = new TMap.InfoWindow({
    map: map,
    //是否使用自定义地址（默认为false）
    enableCustom: true,
    position: new TMap.LatLng(lng, lat),
    content: cusInfoWindow('显示标题','显示地址')
});

// 信息框内容生成函数
function cusInfoWindow(title,address){
    let html = '<div '
    + 'class=info_card'
    + '>'
    + '<div class=marker_title onclick=show()>'+ title + '</div>'
    // + '<div>'+ address + '</div>'
    + '<span class="cancle bot">11</span><span class="cancle top"></span>'
    +'</div>';
    return html;
}