腾讯地图在H5的局部应用
效果图
1.首先我们需要引入腾讯的位置服务js（key值在腾讯位置服务中获取）。
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=2.exp&key=此处为你的key值">script>
2.第二步我们要在页面创建一个div，用于放置地图。
<div id="map">
div>
提示：一定要给地图设置好宽高哦
3.第三步，我们需要在JS中定义一个方法（用于创建地图）此处我用了vue的写法，如有其他需求请自行修改
//获取地图
initMap() {
//定义地图中心点坐标
var center = new TMap.LatLng(22.683770, 114.228270)
//定义map变量，调用 TMap.Map() 构造函数创建地图
var map = new TMap.Map(document.getElementById('map'), {
center: center, //设置地图中心点坐标
zoom: 17, //设置地图缩放级别
});
//创建并初始化MultiMarker
var markerLayer = new TMap.MultiMarker({
map: map, //指定地图容器
//样式定义
styles: {
//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
"myStyle": new TMap.MarkerStyle({
"width": 30, // 点标记样式宽度（像素）
"height": 35, // 点标记样式高度（像素）
"src": 'https://sucai.suoluomei.cn/sucai_zs/images/20200523151828-mapbj.png', //图片路径
//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
"anchor": {
x: 16,
y: 32
}
})
},
//点标记数据数组
geometries: [{
"id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
"styleId": 'myStyle', //指定样式id
"position": new TMap.LatLng(22.683770, 114.228270), //点标记坐标位置
"properties": { //自定义属性
"title": "marker1"
}
}]
});
},
4.调用此方法(vue在mounted中调用)，如果使用的是原生，可以在body处使用οnlοad="方法名"调用
mounted() {
this.initMap()
},
效果图代码附上
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/[email protected]/lib/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>充电站详情title>
<style>
* {
padding: 0;
margin: 0;
}
[v-cloak] {
display: none !important;
}
img {
width: 100%;
height: 100%;
}
body {
background: #f5f5f5;
}
.top {
width: 90%;
padding: .9375rem 5%;
background: white;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.5rem;
}
.top_img {
width: 25%;
height: 5.27375rem;
}
.top_img>img {
object-fit: cover;
}
.top_title {
width: 70%;
margin-left: 5%;
height: 5.27375rem;
display: flex;
flex-direction: column;
justify-content: space-around;
}
#map {
width: 100%;
height: 7.8125rem;
}
.address {
width: 90%;
padding: .9375rem 5%;
background: white;
display: flex;
margin-bottom: 0.5rem;
}
.address_span {
width: 85%;
color: #8f8f8f;
font-size: .8125rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.address_bt {
width: 15%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.address_icon {
width: 50%;
}
.address_bt_span {
font-size: .8125rem;
color: #7b7b7b;
}
.details {
width: 100%;
background: white;
}
.details_border {
width: 90%;
padding: .9375rem 5%;
border-bottom: .0625rem solid #f5f5f5;
display: flex;
justify-content: space-between;
font-size: .875rem;
}
.details_border>span:nth-child(1) {
color: #363636;
}
.details_border>span:nth-child(2) {
display: flex;
justify-content: flex-end;
width: 70%;
color: #9b9b9b;
}
.border-none {
border: none;
}
.prompt {
width: 90%;
padding: .9375rem 5%;
background: white;
}
.prompt_span {
width: 95%;
color: #f18449;
background: #fff7e6;
font-size: .875rem;
padding: .3125rem 2.5%;
border-radius: .1875rem;
}
.scan {
width: 90%;
padding: .3125rem 5%;
background: white;
position: fixed;
bottom: 0;
}
.scan_span {
width: 95%;
padding: .625rem 2.5%;
border-radius: .1875rem;
font-size: 1rem;
color: white;
display: flex;
justify-content: center;
background: #07C160;
}
style>
head>
<body>
<div v-cloak id="Vue">
<div class="top">
<div class="top_img">
![](http://img3.imgtn.bdimg.com/it/u=1048070904,952621251&fm=26&gp=0.jpg"")
div>
<div class="top_title">
<span>深圳名居广场充电站span>
<span>116个交流桩span>
div>
div>
<div id="map">
div>
<div class="address">
<span class="address_span">广东省深圳市龙岗区深惠高速公路196号span>
<div class="address_bt">
<div class="address_icon">
<img src="https://sucai.suoluomei.cn/sucai_zs/images/20200617101817-dh1.png" alt="">
div>
<span class="address_bt_span">1.6kmspan>
div>
div>
<div class="details">
<div class="details_border">
<span>运营商span>
<span>特来电span>
div>
<div class="details_border border-none">
<span>充电单价span>
<span>1.55~1.55/度span>
div>
<div class="details_border">
<span>停车费span>
<span>停车收费，以场地公告为准！span>
div>
<div class="details_border border-none">
<span>支付方式span>
<span>建行聚支付span>
div>
<div class="details_border">
<span>营业时间span>
<span>周一至周日00.00-24.00span>
div>
<div class="details_border">
<span>服务电话span>
<span>4001-300-001span>
div>
div>
<div class="prompt">
<div class="prompt_span">以上信息和充电服务由特来电提供，如有疑问请拨打上方特来电服务电话div>
div>
<div class="scan">
<div @click="scan" class="scan_span">扫一扫div>
div>
div>
body>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js">script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js">script>
<script src="https://cdn.suoluomei.com/common/js2.0/npm/[email protected]/lib/vant.min.js">script>
<script src="https://cdn.suoluomei.com/common/js2.0/jweixin/jweixin-1.4.0.js">script>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=2.exp&key=GV4BZ-COE3X-AAN45-TW4LF-GVVMF-SYBT4">script>
<script>
wx.config({
debug: false,
appId: '',
timestamp: '',
nonceStr: '',
signature: '',
jsApiList: ['scanQRCode']
})
window.alert = function (name) {
var iframe = document.createElement("IFRAME");
iframe.style.display = "none";
iframe.setAttribute("src", 'data:text/plain,');
document.documentElement.appendChild(iframe);
window.frames[0].window.alert(name);
iframe.parentNode.removeChild(iframe);
}
new Vue({
el: "#Vue",
data: {
},
created() {
document.documentElement.style.fontSize = 16 * document.documentElement.clientWidth / 375 + 'px';
// this.initMap()
},
mounted() {
this.initMap()
},
methods: {
//获取地图
initMap() {
//定义地图中心点坐标
var center = new TMap.LatLng(22.683770, 114.228270)
//定义map变量，调用 TMap.Map() 构造函数创建地图
var map = new TMap.Map(document.getElementById('map'), {
center: center, //设置地图中心点坐标
zoom: 17, //设置地图缩放级别
});
//创建并初始化MultiMarker
var markerLayer = new TMap.MultiMarker({
map: map, //指定地图容器
//样式定义
styles: {
//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
"myStyle": new TMap.MarkerStyle({
"width": 30, // 点标记样式宽度（像素）
"height": 35, // 点标记样式高度（像素）
"src": 'https://sucai.suoluomei.cn/sucai_zs/images/20200523151828-mapbj.png', //图片路径
//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
"anchor": {
x: 16,
y: 32
}
})
},
//点标记数据数组
geometries: [{
"id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
"styleId": 'myStyle', //指定样式id
"position": new TMap.LatLng(22.683770, 114.228270), //点标记坐标位置
"properties": { //自定义属性
"title": "marker1"
}
}]
});
},
// 请求公共方法
ajax(type, url, params, cb) {
$.ajax({
type: type,
url: url,
data: params,
dataType: "json",
async: false,
success: (response) => {
cb(response)
}
});
},
scan() {
wx.scanQRCode({
needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
}
});
}
}
})
script>
html>
原理：只要给地图容器固定宽高，就不会影响容器外的html。