注：微信小程序较为简单，h5移动端稍微麻烦些
准备工作，注册腾讯地图获取key(不唯一)
1.微信小程序
（1.）在wxml中添加标签
（2）在地图上添加气泡
markers: [{
iconPath: "/images/dt.png",
id: 0,
latitude: 37.xxxxxxxxx,
longitude: 112.xxxxxxxxxxx,
width: 50,
height: 50,
name: '中国银行',
address: 'xxx长治路xxx中国银行营业厅内',
phone: '95566'
},
........
]
（3）点击气泡获取信息
markertap: function(e) {
var that = this;
console.log("定位的点被点击", e);
var id = this.data.markers[e.markerId]
console.log(id)
for (var i = 0; i < that.data.markers.length; i++) {
var up = "markers[" + id.id + "].width";
var dp = "markers[" + id.id + "].height";
var se_up = "markers[" + i + "].width";
var se_dp = "markers[" + i + "].height";
that.setData({
map_list: [{
name: id.a,
lat: id.latitude,
log: id.longitude,
address: id.address,
jl: that.distance(that.data.lat, that.data.log, id.latitude, id.longitude),
phone:id.phone
}],
[up]: 60,
[dp]: 60,
[se_up]: 50,
[se_dp]: 50
})
}
},
2.h5 应用
（1）引入meta标签
（2）获取用户当前位置信息（不唯一）
infoLogin: function() {
var that = this;
layer.open({
content: '系统将获取您的地理位置',
btn: ['允许', '取消'],
yes: function(index) {
layer.open({
type: 2,
content: '加载中',
time: 2
});
var geolocation = new qq.maps.Geolocation("key",
"myapp");
function showPosition(position) {
var lats = JSON.stringify(position, null, 4);
that.lat = position.lat;
that.log = position.lng;
that.getLocation();
};
var a = geolocation.getLocation(showPosition)
layer.close(index);
},
no: function() {
}
});
}
（3）在页面中载入地图
var center = new qq.maps.LatLng(that.lat, that.log);//地图显示的中心
var map = new qq.maps.Map(document.getElementById('mapBox'), {
center: center, //设置中心点
zoom: 14 //设置地图缩放级别
});
//创建标记
var marker = new qq.maps.Marker({
// position: center,
map: map,
});
var info = new qq.maps.InfoWindow({
map: map
});
var result = {
"code": 0,
"msg": "success",
"data": [{
id: 0,
latitude: 37.xxxxxxxxx,
longitude: 112.xxxxxxxxxxx,
width: 50,
height: 50,
name: '中国银行',
locate: 'xxxxx长治路453号x',xxxxxxxxxxxx
phone: '95566'
}],
}
if (result.code == 0 && result.msg == "success") {
for (var i = 0; i < result.data.length; i++) {
var data = result.data[i];
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(data.latitude, data.longitude),
map: map,
}); //创建标记
var anchor = new qq.maps.Point(0, 39), //自定义气泡
size = new qq.maps.Size(38, 68),
origin = new qq.maps.Point(0, 0),
markerIcon = new qq.maps.MarkerImage(
"../image/dt.png",
size,
origin,
anchor
);
marker.setIcon(markerIcon);
//***将必要的数据存入每一个对应的marker对象
marker.id = data.id;
marker.name = data.name;
marker.locate = data.locate;
qq.maps.event.addListener(marker, 'click', function(e) { //获取标记的点击事件
// alert(e.latLng)
// console.log(e)
var getlat = e.latLng;
console.log(getlat.lat)
console.log(e)
var getname = e.target.name;
var getaddress = e.target.locate;
layer.open({
skin: 'demo-class',
title: [
getname,
'background-color:rgb(204, 54, 54); color:#fff;'
],
anim: 'up',
content: getaddress,
btn: ['到这儿', '打电话'],
yes: function(index) {
layer.open({
type: 2,
content: '请稍等',
time: 2
});
window.location.href = "https://apis.map.qq.com/uri/v1/routeplan?type=walk&fromcoord=37.80680022788906,112.54690647125244&to=" + getaddress + "&referer=key"
},
//注意 type为乘坐方式，fromcoord为开始点坐标，to为重点位置，referer为key;
no: function(index) {
window.location.href = "tel://95566"; //点击拨打电话
}
});
// info.open(); //点击标记打开提示窗
// info.setContent('
' + this.name + '
' + this.locate + '
// info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng)); //提示窗位置
});
}
} else {
//layer.open({ content: "获取附近商铺失败", skin: 'msg', time: 2 });
}
补：移动端弹窗用了layer
使用方法
（1）下载资源包导入项目根目录
（2）在需要加载的文件下引入
（3）js 中使用layer.open ，例如
layer.open({
type: 2,
content: '请稍等',
time: 2
});
其他样式可参考文档