引入qqmap
<script src="https://map.qq.com/api/gljs?v=1.exp&key=自己申请的key&libraries=drawing,geometry"></script>
// 本人是在vue2进行开发的，这个简书的编辑器真的太不好用了，代码的缩紧就不调整了
var map = null
data() {
return {
local: [22.54286, 114.05956],
detailInfo: []
}
}
// 以下均在method方法内
// 定义地图中心点坐标
const [ local1, local2 ] = this.local
var center = new window.TMap.LatLng(local1, local2)
var clusterBubbleList = []
var markerGeometries = []
var that = this
var marker = null
var infoWindow = nul // 信息窗
// 定义map变量，调用 TMap.Map() 构造函数创建地图
map = new window.TMap.Map(document.getElementById("mapContainer"), {
center, //设置地图中心点坐标
zoom: 15, //设置地图缩放级别
viewMode: "2D", // 3d或者2d
panControl: true, // 是否显示控件
// mapStyleId: that.theme ? 'style1' : 'style2' // 根据夜间模式决定样式，样式在控制台的个性化地图中绑定样式
})
var markerCluster = new TMap.MarkerCluster({
id: 'cluster', //图层id
map: map, //设置点聚合显示在哪个map对象中（创建map的段落省略）
enableDefaultStyle: false, //使用默认样式
minimumClusterSize: 2, //最小聚合点数：2个
geometries: [
{position: new TMap.LatLng(39.982829,116.306934)}, // 对象内可以传点其他你需要用上的元素
{position: new TMap.LatLng(39.989011,116.323586)}
], // 坐标列表
zoomOnClick: true, //点击聚合数字放大展开
gridSize: 60, //聚合算法的可聚合距离，即距离小于该值的点会聚合至一起，默认为60，以像素为单位
averageCenter: false, //每个聚和簇的中心是否应该是聚类中所有标记的平均值
maxZoom: 10 //采用聚合策略的最大缩放级别，若地图缩放级别大于该值，则不进行聚合，标点将全部被展开
})
map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE) // 移除坐标尺控件
// 初始化信息窗
infoWindow = new TMap.InfoWindow({
map: map,
content: "<div><p>Hello World!</p></div>",
// enableCustom: true, // 是否开启自定义样式，如开启则content必须写成如上行的格式
position: new TMap.LatLng(39.984104, 116.307503), // 初始化显示位置
offset: { x: 0, y: -32 } // 设置信息窗相对position偏移像素
});
infoWindow.close()
markerCluster.on('cluster_changed', function (e) {
// 销毁旧聚合簇生成的覆盖物
if (clusterBubbleList.length) {
clusterBubbleList.forEach(function (item) {
item.destroy();
})
clusterBubbleList = [];
}
markerGeometries = []
// 根据新的聚合簇数组生成新的覆盖物和点标记图层
var clusters = markerCluster.getClusters()
clusters.forEach(function (item) {
if (item.geometries.length > 1) {
let clusterBubble = new ClusterBubble({
map,
position: item.center,
content: item.geometries.length
});
clusterBubble.on('click', () => {
map.fitBounds(item.bounds)
});
clusterBubbleList.push(clusterBubble)
} else {
markerGeometries.push({
position: item.center // 还能传点其他你要用到的参数
})
}
});
if (marker) {
// 已创建过点标记图层，直接更新数据
marker.setGeometries(markerGeometries)
} else {
// 创建点标记图层 这里是自定义的样式
marker = new TMap.MultiMarker({
map: map,
styles: {
default: new TMap.MarkerStyle({
'width': 34,
'height': 38,
'anchor': {
x: 17,
y: 21
},
'src': 'https://xxxxxxxx',
}),
},
geometries: markerGeometries
})
// 用户自身定位标
var marker2 = new TMap.MultiMarker({
map: map,
styles: {
// 点标记样式
default: new TMap.MarkerStyle({
'width': 20, // 样式宽
'height': 30, // 样式高
'anchor': { x: 10, y: 30 }, // 描点位置
}),
},
geometries: [
// 点标记数据数组
{
// 标记位置(纬度，经度，高度)
position: center
},
],
})
marker.on("click", function (evt) {
infoWindow.close()
//设置infoWindow
infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
infoWindow.setContent(
`
<div class="infowindow-wrap" id="${evt.geometry.store_id}-1">
<div class="map-wrap" id="${evt.geometry.store_id}-2">
</div>
</div>
`
);//设置信息窗内容
infoWindow.open(); //打开信息窗
that.detailInfo = evt.geometry
// 监听信息窗关闭按钮
infoWindow.on("closeclick", function (evt) {
that.detailInfo = null
infoWindow.close()
})
// 给信息窗绑定点击事件，暂时不知道怎么优化了，等大佬来优化吧....
// 目前信息窗体能监听的事件没有点击信息窗体的内容的这个事件
// 可以直接访问infowindow实例获取display， infoWindow.dom.style.display来判断是否显示
document.getElementById(that.detailInfo.store_id+'-1').onclick = function(e) {
that.jumpDetail(e.target.id.split('-')[0])
}
})
}
})
这里可以设置地图中心点
map.setCenter(new TMap.LatLng(location.lat, location.lng))
这里可以设置地图的个性化
map.setMapStyleId('style2')
最后效果图如下
1.png
