使⽤腾讯位置服务获取位置及设置地图点标记⽂本标记demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=750, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>腾讯地图test</title>
<style>
@charset "utf-8";
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer;}
html{ max-width:750px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","STHeitiSC-Light","微软雅⿊","Microsoft YaHei","sans-serif"; font-size:28px; line-height:1.6; color:#000; background-colo -webkit-user-select:none;
user-select:none;
-webkit-touch-callout:none;
touch-callout:none;
}
li{ list-style:none;}
i{ font-style:normal;}
a:link , a:visited , a:hover ,a:active{ text-decoration:none; color:#000;}
.cle:after{ content:""; display:block; height:0; clear:both;}
button , input , select , textarea{ font-family:"PingFangSC-Regular","STHeitiSC-Light","微软雅⿊","Microsoft YaHei","sans-serif"; outline:none; border-radius:0; font -webkit-appearance:none;
appearance:none;
}
input[type=checkbox] , input[type=radio]{ margin:0 5px;}
input::-webkit-outer-spin-button , input::-webkit-inner-spin-button{ margin:0;
-webkit-appearance:none !important;
appearance:none !important;
}
input::-webkit-input-placeholder{ color:#ccc;}
.hide , [v-clock]{ display:none;}
img{ max-width: 100%; vertical-align:middle;}
body{
--navheight:80px;
}
@-webkit-keyframes fadeToLeft{
0%{ -webkit-transform:translateX(100%); opacity:0;}
100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeToLeft{
0%{ transform:translateX(100%); opacity:0;}
100%{ transform:translateX(0); opacity:1;}
}
.nav{ width: 100%; height: var(--navheight); background-color: #fff; position: fixed; left: 0; top: 0; /* z-index: 1; */
box-shadow: 0 3px 10px rgba(0,0,0,.1);
display: flex; justify-content: center; align-items: center;
}
.nav_li{ height: 100%; text-align: center; position: relative;
flex: 1; display: flex; justify-content: center; align-items: center;
}
.nav_li.curr{ color: #29a49f; font-weight: bold;}
.nav_li.curr{ color: #29a49f; font-weight: bold;}
.nav_li:not(:first-child)::before{ content: ""; width: 2px; height: 48px; background-color: #29a49f; position: absolute; left: 0; top: 50%; margin-top: -24px;}
.map_show{ height: 100vh; padding-top: var(--navheight); position: relative; overflow: hidden;}
.map_show div , .map_show canvas{ z-index: auto !important;}
/* 列表显⽰ */
.map_show_list{ width: 100%; height: calc(100% - var(--navheight)); background-color: #fff; position: absolute; left: 0; top: var(--navheight);
-webkit-animation: fadeToLeft .3s ease-out both;
animation: fadeToLeft .3s ease-out both;
}
.map_show_list ul{ padding: 20px;}
</style>
</head>
<body>
<section id="app" v-clock>
<div class="map_show">
<!-- 定义地图显⽰容器 -->
<div id="container" ></div>
<!-- 列表显⽰ -->
<div v-show="showList" class="map_show_list">
<ul>
<!-- 列表 -->
<li @click="goDetail(item.id,item.lat,item.lon)" v-for="item,index in mapList">
工厂格式化{{item.title}}
</li>
</ul>
</div>
</div>
<!-- 菜单 -->
<div class="nav">
<div @click="showList = false" class="nav_li" :class="showList ? '' : 'curr'">地图</div>
<div @click="showList = true" class="nav_li" :class="showList ? 'curr' : ''">列表</div>
</div>
</section>
<script src="cdn.bootcdn/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/vue/2.2.2/vue.min.js"></script>
<!-- 获取位置信息 - JS-SDK - wx.getLocation 请确认config的jsApiList参数包含了getLocation(获取定位测试⼩数点后第4位开始会有浮动) -->
<!-- <script src="res.wx.qq/open/js/jweixin-1.2.0.js" tppabs="res.wx.qq/open/js/jweixin-1.2.0.js"></script> -->
<!-- 获取位置信息 - 腾讯位置服务-地图组件-前端定位组件：调⽤⽅式⼀(获取定位测试 PC端不稳定⼤
约需要15秒的处理时间；安卓机需https环境，WIFI及4G皆成功；<script src="mapapi.qq/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
<!-- <script src="3gimg.qq/lightmap/components/geolocation/geolocation.min.js"></script> -->
<!-- 获取位置信息 - 腾讯位置服务-地图组件-前端定位组件：调⽤⽅式三(获取定位测试 PC失败；安卓机需https环境，WIFI及4G皆成功；苹果机WIFI成功但位置有偏差<!-- <script src="apis.map.qq/tools/geolocation/min?key=YOUR_KEY&referer=wxapp"></script> -->
<!--引⼊Javascript API GL，参数说明参见下⽂-->
<script src="map.qq/api/gljs?p&key=YOUR_KEY"></script>
<script type="text/javascript">
var VM = new Vue({
el:"#app",
data:{
map:null,
center:null,
showList:false,
mapList:[],position和location的区别
},
created() {
有效的优化mysql数据库created() {
},
mounted() {
//定义地图中⼼点坐标
< = new TMap.LatLng(31.820564,117.227313);
/
/ 地图初始化
this.initMap();
// 获取位置信息
// 获取列表数据
},
watch() {
},
methods:{
// 获取位置信息 - JS-SDK - wx.getLocation 请确认config的jsApiList参数包含了getLocation(获取定位测试⼩数点后第4位开始会有浮动)
// getLocation(){
// wx.ready(function(){
// console.log('获取定位中...');
// wx.getLocation({
// type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation⽤的⽕星坐标，可传⼊'gcj02'
// success: function (res) {
// console.log(res);
// alert('定位成功，纬度' + res.latitude);
// alert('定位成功，经度' + res.longitude);
// // var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
// // var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
// // var speed = res.speed; // 速度，以⽶/每秒计
// // var accuracy = res.accuracy; // 位置精度
// // 重置地图中⼼点坐标
// _this.map.setCenter(new TMap.LatLng(res.latitude,res.longitude));
// }
// });
// });
// },
// 获取位置信息 - 腾讯位置服务-地图组件-前端定位组件
getLocation(){
let _this = this;
console.log('获取定位中...');
// 获取位置信息 - 腾讯位置服务-地图组件-前端定位组件：调⽤⽅式⼀(获取定位测试 PC端不稳定⼤约需要15秒的处理时间；安卓机需https环境，WIFI及4G皆成功； var geolocation = new qq.maps.Geolocation('YOUR_KEY', 'wxapp');
// 获取位置信息 - 腾讯位置服务-地图组件-前端定位组件：调⽤⽅式三(获取定位测试 PC失败；安卓机需https环境，WIFI及4G皆成功；苹果机WIFI成功但位置有偏差 // var geolocation = new qq.maps.Geolocation();
var getNumber = 0;
function showPosition(position) {
console.log(getNumber,'定位成功');
// var locationData = JSON.stringify(position, null, 4);
var locationData = position;
console.log(locationData);
alert('定位成功，纬度' + locationData.lat);
alert('定位成功，经度' + locationData.lng);
// 重置地图中⼼点坐标
_this.map.setCenter(new TMap.LatLng(locationData.lat,locationData.lng));
};
function showErr() {
console.log(getNumber,'定位失败');
if(getNumber >= 2){
alert('友情提⽰：定位失败');
}else{
getNumber++;
}
};
},
//
//地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap() {
let _this = this;
//定义map变量，调⽤ TMap.Map() 构造函数创建地图
_this.map = new TMap.ElementById('container'), {
center: _, //设置地图中⼼点坐标
zoom: 13, //设置地图缩放级别3-20
pitch: 40, //设置俯仰⾓
// rotation: 45 //设置地图旋转⾓度
scale: 1.5
});
console.log(_Center());
},
//
// 设置点标记和⽂字标记
setMapMultiMarkerAndMultiLabel(styles,geometries,geometries2){
let _this = this;
//点标记创建并初始化MultiMarker
var markerLayer = new TMap.MultiMarker({
map: _this.map, //指定地图容器
//样式定义
styles: styles,
// styles: {
// //创建⼀个styleId为"myStyle"的样式（styles的⼦属性名即为styleId）
// "myStyle": new TMap.MarkerStyle({
// "width": 24, // 点标记样式宽度（像素）
/
/ "height": 24, // 点标记样式⾼度（像素）
// "src": 'curr.png', //图⽚路径
// //焦点在图⽚中的像素位置，⼀般⼤头针类似形式的图⽚以针尖位置做为焦点，圆形点以圆⼼位置为焦点 // "anchor": { x: 12, y: 12 }
// })
// },
//点标记数据数组
geometries: geometries,
// geometries: [
// {
// "id": "1", //点标记唯⼀标识，后续如果有删除、修改位置等操作，都需要此id
// "styleId": 'myStyle', //指定样式id
// "position": _, //点标记坐标位置
// "properties": { //⾃定义属性
// "title": "安徽省合肥市蜀⼭区科学⼤道116号5F创业园"
automate教程// }
// },
// ]
});
// 点击事件
<("click",(e)=>{
// console.log(e);
// console.log(e.latLng);
/
/ console.ry);
// console.ry.id,e.latLng.lat,e.latLng.lng);
console.ry.ry.position.ry.position.lng);
// _ry.ry.position.ry.position.lng);
console.ry.ry.properties.ry.properties.lon);
_ry.ry.properties.ry.properties.lon);
})
//⽂字标记初始化label
var label = new TMap.MultiLabel({
id: 'label-layer',
map: _this.map, //设置折线图层显⽰到哪个地图实例中
/
/⽂字标记样式
styles: {
'label': new TMap.LabelStyle({
'color': '#ff0000', //颜⾊属性
'size': 18, //⽂字⼤⼩属性
// 'offset': { x: 0, y: 0 }, //⽂字偏移属性单位为像素
'offset': { x: 0, y: 12 }, //⽂字偏移属性单位为像素
'angle': 0, //⽂字旋转属性
'alignment': 'center', //⽂字⽔平对齐属性
'verticalAlignment': 'middle' //⽂字垂直对齐属性
})
},
vb连接数据库access//⽂字标记数据
geometries: geometries2,
// geometries: [{
// 'id': 'label_1', //点图形数据的标志信息
// 'styleId': 'label', //样式id
// 'position': center, //标注点位置
// 'content': '腾讯北京总部', //标注⽂本
// }]
});
// 点击事件
<("click",(e)=>{
console.ry.ry.position.ry.position.lng);
_ry.ry.position.ry.position.lng);
})
},
//
// 跳转详情页
goDetail(id,lat,lon){
console.log(id,lat,lon);
if(confirm('您确认跳转⾄些详情页吗？')){
console.log('确认跳转');
api接口rest
}
},
//
// 获取列表数据
getData(){
let _this = this;
/* test */
var res = {
"status": 1,
"list": [
{
"id": "MDAwMDAwMDAwMH-Je5h_jHqs", //id
"markImg": "imgsrc.baidu/forum/pic/item/aa64034f78f0f736a4a890f80955b319eac413f0.jpg", //标点图 "lon": "117.224802", //经度
"lat": "31.811615", //纬度
"title": "天鹅湖体育公园", //标题
},
{
"id": "MDAwMDAwMDAwMH-Je5h_jHpi",
"markImg": "imgsrc.baidu/forum/pic/item/aa64034f78f0f736a4a890f80955b319eac413f0.jpg",
"lon": "117.232985",
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论