admin 管理员组文章数量: 1184232
1、引入腾讯地图前先申请密钥(https://lbs.qq/)
2、申请完密钥后，在你的文件中引入腾讯地图
<script charset="utf-8" src="https://map.qq/api/gljs?v=1.exp&key=你的密钥"></script>
3、接下来就可以开发你的地图，想要什么类型可以看腾讯地图官网(https://lbs.qq/)，举例如下：
<script>
// 这里的定位（经纬度），不知道经纬度也可以使用腾讯地图工具查找
let longitude = "113.366534",
latitude = "22.978183",
labelAddres = " ",
jlon = "113.366534",
jlat = "22.978183"
initMap(longitude, latitude, labelAddres, jlon, jlat);
//地图初始化函数，本例取名为init，开发者可根据实际情况定义
function initMap(lon, lat, title, jlon, jlat) {
//定义地图中心点坐标
var center = new TMap.LatLng(lat, lon);
//定义map变量，调用 TMap.Map() 构造函数创建地图
var map = new TMap.Map(document.getElementById('container'), {
center: center, //设置地图中心点坐标
zoom: 15, //设置地图缩放级别
});
//初始化marker
var marker = new TMap.MultiMarker({
id: "marker-layer", //图层id
map: map,
styles: { //点标注的相关样式
marker: new TMap.MarkerStyle({
width: 30, // 样式宽
height: 40, // 样式高
anchor: { x: 10, y: 30 }, // 描点位置
}),
},
geometries: geometries(lat, lon, jlat, jlon)
});
//初始化infoWindow
var infoWindow = new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(22.978183,113.366534),
offset: { x: 0, y: -32 }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
});
//监听标注点击事件
infoWindow.open(); //打开信息窗
infoWindow.setContent(`<div class ="containerp">我在<p>国家软件产业基地天河华景园区</p>附近>
</div>`);//设置信息窗内容
//初始化label
var label = new TMap.MultiLabel({
id: 'label-layer',
map: map, //设置折线图层显示到哪个地图实例中
//文字标记样式
styles: {
'label_1': labelColor('rgba(0,0,0,0.8)'),
},
//文字标记数据
geometries: labelgeometries(center, title, jlat, jlon)
});
}
function labelColor(color) {
return new TMap.LabelStyle({
'color': color, //颜色属性
'size': 16, //文字大小属性
'offset': {
x: 0,
y: -40
}, //文字偏移属性单位为像素
'angle': 0, //文字旋转属性
'alignment': 'center', //文字水平对齐属性
'verticalAlignment': 'middle' //文字垂直对齐属性
})
}
function labelgeometries(center, title, jlat, jlon) {
return [{
'id': 'label_1', //点图形数据的标志信息
'styleId': 'label_1', //样式id
'position': center, //标注点位置
'content': title, //标注文本
}];
}
function setMarkImg(src) {
return new TMap.MarkerStyle({
"width": 35,
"height": 40,
"anchor": {
x: 16,
y: 32
},
"src": src
})
}
function geometries(lat, lon, jlat, jlon) {
return [{ //点标注数据数组
"id": "marker",
"styleId": "marker",
"position": new TMap.LatLng(lat, lon),
"properties": {
"title": "marker"
}
}];
}
效果：
注意经纬度不要写反，写反会报以下错误：
版权声明：本文标题：前端引入腾讯地图 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1755009971a3059838.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论