Vue3前端项目加载使用腾讯地图
·
前言：
最近要做一个有关地图的项目，以前想到用过腾讯地图api做过小程序，就打算用腾讯地图api和vue3项目结合。用腾讯地图开发api遇到一个小bug，代码没问题但是效果差了，后来想做不同标记进行不同的聚类，比较难实现。找资料的时候发现高德开放平台的地图api不错。如果项目也要用到地图的话，可以试试高德，可能是项目原因，个人感觉高德开放平台比较香。
回到正题
来个效果图：
首先注册和申请key
这个照着腾讯地图开发平台文档步骤做就行。
一、加载地图
1、 在public文件下的index.html文件添加下面的代码
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
"key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"这里的key用自己的。
index.html整个代码：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>地理服务系统</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=73YBZ-UP63D-BI242-HSLGT-44P42-UAFB3&libraries=visualization"></script>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2、建一个MapTX.vue
首先要有一个初始化地图的函数initMap(),然后在生命钩子onMounted()中调用即可。在初始化函数中用window.TMap来创建地图中心center和地图map。注意是通过new window.TMap.
const initMap = ()=>{
//定义地图中心点坐标
var center = new window.TMap.LatLng(39.984120, 116.307484)
//定义map变量，调用 TMap.Map() 构造函数创建地图
var map = new window.TMap.Map(document.getElementById('container'), {
center: center,//设置地图中心点坐标
zoom: 7.2, //设置地图缩放级别
mapStyleId: 'style2', //设置地图样式
});
onMounted代码：
onMounted(()=>{
initMap()
})
MapTX.vue代码：
<template>
<div id="container"></div>
</template>
import {onMounted} from 'vue'
export default {
setup () {
const initMap = ()=>{
//定义地图中心点坐标
var center = new window.TMap.LatLng(39.984120, 116.307484)
//定义map变量，调用 TMap.Map() 构造函数创建地图
var map = new window.TMap.Map(document.getElementById('container'), {
center: center,//设置地图中心点坐标
zoom: 7.2, //设置地图缩放级别
mapStyleId: 'style2', //设置地图样式
});
}
onMounted(()=>{
initMap()
})
return {
}
}
}
<style>
#container {
/*地图(容器)显示大小*/
width: 100%;
height: 100%;
}
</style>
二、自定义地图
进入腾讯个性化地图设置自己想要的地图模板，可以设置多个。
然后在创建地图的代码上加上mapStyleId: 'style2',即可
var map = new window.TMap.Map(document.getElementById('container'), {
center: center,//设置地图中心点坐标
zoom: 7.2, //设置地图缩放级别
mapStyleId: 'style2', //设置地图样式
});
三、设置控件显示缩放级数
只要在初始化函数中加入以下代码即可
//获取缩放控件
var control = map.getControl(window.TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
//设置显示缩放为true
control.setNumVisible(true);
四、创建点的样式
在初始化的函数initMap(),加入下面的代码。
注意点:
- 可以自定义多个不同的样式
- 点样式的图片可以使用url本地图片或者 src网络图片。
- 通过指定geometries点标记数组中的styleId来指定自定义样式。
- 点数组中的每一个点的"properties"属性是一个对象，可以自己定义，并且点数组中的点对象都可以通过infoWindow来获得（后面再讲）。
//创建并初始化MultiMarker
var marker = new window.TMap.MultiMarker({
map: map, //指定地图容器
//样式定义
styles: {
//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
//将不同的作物指定为不同的样式
"myStyle": new window.TMap.MarkerStyle({
"width": 25, // 点标记样式宽度（像素）
"height": 35, // 点标记样式高度（像素）
"url": '../assets/icon/map-marker.png', //图片路径
//"src":'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',
//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
"anchor": { x: 16, y: 32 }
}),
"crop1": new window.TMap.MarkerStyle({
"width": 25, // 点标记样式宽度（像素）
"height": 35, // 点标记样式高度（像素）
"url": '../assets/icon/Marker.png', //图片路径
"anchor": { x: 16, y: 32 }
})
},
//点标记数据数组
geometries: [{
"id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
"styleId": 'myStyle', //指定样式id
"position": new window.TMap.LatLng(39.954104, 116.357503), //点标记坐标位置
"properties": {//自定义属性
"title": "marker1",
"info":"info1"
}
}, {//第二个点标记
"id": "2",
"styleId": 'crop1',
"position": new window.TMap.LatLng(39.994104, 116.287503),
"properties": {
"title": "marker2",
"info":"info2"
}
}]
});
五、点击标记点弹出信息窗
先初始化infoWindow对象，
先关闭弹窗信息，infoWindow.close();//初始关闭信息窗关闭
再通过监听标记点点击事件来打开信息窗，可以通过infoWindow.setPosition 和infoWindow.setContent来设置弹窗位置和内容。
可以输出evt，看看里面的一些属性
//初始化infoWindow
var infoWindow = new window.TMap.InfoWindow({
map: map,
position: new window.TMap.LatLng(39.984104,116.307503),
offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
});
infoWindow.close();//初始关闭信息窗关闭
//监听标注点击事件
marker.on("click", function (evt) {
//设置infoWindow
infoWindow.open(); //打开信息窗
infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
//将信息与标记点关联起来
infoWindow.setContent(evt.geometry.properties.title+
evt.geometry.properties.info);//设置信息窗内容
// console.log(evt)
})
总的代码
如果地图不是全屏，可以看这篇height设置100%无效
<template>
<div id="container"></div>
</template>
<script>
import {onMounted,reactive,ref} from 'vue'
export default {
setup () {
const initMap = ()=>{
//定义地图中心点坐标
var center = new window.TMap.LatLng(39.984120, 116.307484)
//定义map变量，调用 TMap.Map() 构造函数创建地图
var map = new window.TMap.Map(document.getElementById('container'), {
center: center,//设置地图中心点坐标
zoom: 7.2, //设置地图缩放级别
mapStyleId: 'style2', //设置地图样式
});
//获取缩放控件
var control = map.getControl(window.TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
control.setNumVisible(true);
//创建并初始化MultiMarker
var marker = new window.TMap.MultiMarker({
map: map, //指定地图容器
//样式定义
styles: {
//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
//将不同的作物指定为不同的样式
"myStyle": new window.TMap.MarkerStyle({
"width": 25, // 点标记样式宽度（像素）
"height": 35, // 点标记样式高度（像素）
"url": '../assets/icon/map-marker.png', //图片路径
//"src":'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',
//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
"anchor": { x: 16, y: 32 }
}),
"crop1": new window.TMap.MarkerStyle({
"width": 25, // 点标记样式宽度（像素）
"height": 35, // 点标记样式高度（像素）
"url": '../assets/icon/Marker.png', //图片路径
"anchor": { x: 16, y: 32 }
})
},
//点标记数据数组
geometries: [{
"id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
"styleId": 'myStyle', //指定样式id
"position": new window.TMap.LatLng(39.954104, 116.357503), //点标记坐标位置
"properties": {//自定义属性
"title": "marker1",
"info":"info1"
}
}, {//第二个点标记
"id": "2",
"styleId": 'crop1',
"position": new window.TMap.LatLng(39.994104, 116.287503),
"properties": {
"title": "marker2",
"info":"info2"
}
}]
});
//创建点聚合对象
/* var markerCluster = new window.TMap.MarkerCluster({
id: 'cluster', //图层id
map: map, //设置点聚合显示在哪个map对象中（创建map的段落省略）
enableDefaultStyle: true, //使用默认样式
minimumClusterSize: 2, //最小聚合点数：2个
geometries: [
{position: new window.TMap.LatLng(39.982829,116.306934)},
{position: new window.TMap.LatLng(39.989011,116.323586)},
{position: new window.TMap.LatLng(39.978751,116.313286)},
{position: new window.TMap.LatLng(39.980593,116.304359)},
{position: new window.TMap.LatLng(39.994104, 116.287503)},
{position: new window.TMap.LatLng(39.954104, 116.357503)},
//....将您所有要打到图中的坐标点传入进来
],
zoomOnClick: true, //点击聚合数字放大展开
gridSize: 60, //聚合算法的可聚合距离，即距离小于该值的点会聚合至一起，默认为60，以像素为单位
averageCenter: false, //每个聚和簇的中心是否应该是聚类中所有标记的平均值
maxZoom: 16 //采用聚合策略的最大缩放级别，若地图缩放级别大于该值，则不进行聚合，标点将全部被展开
}) */
//初始化infoWindow
var infoWindow = new window.TMap.InfoWindow({
map: map,
position: new window.TMap.LatLng(39.984104,116.307503),
offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
});
infoWindow.close();//初始关闭信息窗关闭
//监听标注点击事件
marker.on("click", function (evt) {
//设置infoWindow
infoWindow.open(); //打开信息窗
infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
//将信息与标记点关联起来
infoWindow.setContent(evt.geometry.properties.title+
evt.geometry.properties.info);//设置信息窗内容
// console.log(evt)
})
}
onMounted(()=>{
initMap()
})
return {
}
}
}
</script>
<style>
#container {
/*地图(容器)显示大小*/
/* width: 1200px;
height: 400px; */
width: 100%;
height: 100%;
}
</style>
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
9
0- 0
已为社区贡献1条内容
所有评论(0)