1.创建一个TMap.js文件
export function TMap0() {
return new Promise(function (resolve, reject) {
window.init = function () {
resolve(window.TMap)//注意这里
}
var script = document.createElement(“script”);
script.type = “text/javascript”;
script.src = “https://map.qq.com/api/gljs?v=1.exp&callback=init&key=”+‘EYOBZ-4XV6O-X75WV-SNZSM-ROXD7-IAFQB’; //EYOBZ-4XV6O-X75WV-SNZSM-ROXD7-IAFQB是你申请的key
script.onerror = reject;
document.head.appendChild(script);
})
}
2.我创建了一个shoplist.vue,我这个页面需要使用地图
script里面
import { TMap0 } from ‘@/common/js/TMap.js’ //导入TMap.js
// 然后下面就是我使用地图打点的业务逻辑
TMap0().then(TMap => {
var center = new window.TMap.LatLng(data2[0].latitude,data2[0].longitude);
var map = new window.TMap.Map(document.getElementById(“container”), {
// 地图的中心地理坐标
center: center,
//初始化地图缩放级别
zoom: 11
});
//添加标记
console.log('添加标记')
for(let i=0;i<data2.length;i++){
var marker = new window.TMap.MultiMarker({
map: map,
styles: {
//创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
"myStyle": new window.TMap.MarkerStyle({
"width": 32, // 点标记样式宽度(像素)
"height": 32, // 点标记样式高度(像素)
"src": 'http://wx.huahejm.com/dangpu/web/dw.jpg', //图片路径
//焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
"anchor": { x: 0, y: 0 }
})
},
//点标记数据数组
geometries: [{
"id": i, //点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
"styleId": 'myStyle', //指定样式id
"position": new window.TMap.LatLng(data2[i].latitude,data2[i].longitude), //点标记坐标位置
"properties": {//自定义属性
"title": "marker1"
}
}
]
})
// var anchor = new window.TMap.Point(0, 0),
// size = new window.TMap.Size(32, 32),
// origin = new window.TMap.Point(0, 0),
// markerIcon = new window.TMap.MarkerImage(
// "../../../assets/images/tx.jpg",
// size,
// origin,
// anchor
// );
// marker.setIcon(markerIcon);
console.log('添加标记完成')
// marker.libraryName = data[i].name
//初始化infoWindow
var infoWindow = new window.TMap.InfoWindow({
map: map,
position: new window.TMap.LatLng(data2[i].latitude,data2[i].longitude),
offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素,为了使其显示在Marker的上方
});
infoWindow.close();//初始关闭信息窗关闭
//监听标注点击事件
marker.on("click", function (evt) {
//设置infoWindow
infoWindow.open(); //打开信息窗
infoWindow.setPosition(new window.TMap.LatLng(data2[i].latitude,data2[i].longitude));//设置信息窗位置
infoWindow.setContent('<div class="col" style="white-space:'+
'nowrap;margin:10px;"> <div>店铺:' + data2[i].name+ '</div><div >地址:' + data2[i].address+ '</div></div>');//设置信息窗内容
})
// window.TMap.event.addListener(marker, 'click', function() {
// infoWin.open();
// infoWin.setContent('<div class="col" style="white-space:'+
// 'nowrap;margin:10px;"> <div>店铺:' + data[i].name+ '</div><div >地址:' + data[i].address+ '</div></div>');
// //提示窗位置
// infoWin.setPosition(new window.TMap.LatLng(data[i].latitude,data[i].longitude));
// })
}
})