vue开发微信公众号-地图 - Powered by Discuz! Archiver

章誉馨 發表於 2019-5-7 20:37:00

vue开发微信公众号--地图

在最近开发的微信公众号中，要实现一个打卡功能：
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507144021537-1769126251.png">
由于个人感觉微信SDK里面的地图不太好用，所以使用了腾讯地图。
<h2>在项目中引入腾讯地图</h2>
1,需要登录腾讯地图网站，注册一个账户，获得一个key。
2,然后找到项目根目录下面的index.html，引入需要使用到的js
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
 <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html></pre>
</div>
3,项目根目录--> src -->service文件夹下新建parking.js（文件名称和路径可以自定义，只需要在使用时能找到就可以了）
parking.js（文件里的key填自己申请的就可以了）
<div class="cnblogs_code">
<pre>export function TMap() {
return new Promise(function(resolve, reject) {
window.init = function() {
 resolve(qq)
}
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'https://map.qq.com/api/js?v=2.exp&callback=init&key=SI5BZ-RTZRQ-2YD52-GAIRP-Z2CBK-7SFIC'
script.onerror = reject
document.head.appendChild(script)
})
}</pre>
</div>
<h2>使用地图</h2>
1，引入parking.js
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507174211252-627791824.png">
2，展示地图的容器
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507174301349-1753184777.png">
3，获取当前位置，并展示以当前位置为中心的地图（注释位置依旧填写自己注册的key）
先贴代码
<div class="cnblogs_code">
<pre>getMyLocation() {
 var geolocation = new qq.maps.Geolocation("SI5BZ-RTZRQ-2YD52-GAIRP-Z2CBK-7SFIC", "打卡");
 geolocation.getIpLocation(this.showPosition, this.showErr);
 },
 showPosition(position) {
 console.warn(position);
 this.latitude = position.lat;
 this.longitude = position.lng;
 this.city = position.city;
 this.mapTX();
 },
 showErr() {
 Toast({
 message: '定位失败，请稍后重试！',
 position:'center',
 });
 // this.$router.back(-1);
 this.getMyLocation();//定位失败再请求定位，测试使用
 },
 mapTX() {
 let that = this;
 // 根据地理位置坐标，展示地图
 TMap().then(qq => {
 var map = new qq.maps.Map(document.getElementById('container'), {
 //这里经纬度代表进入地图显示的中心区域
 center: new qq.maps.LatLng(that.latitude,that.longitude),
 zoom: 15
 });
 var marker = new qq.maps.Marker({
 map : map,
 position : new qq.maps.LatLng(that.latitude,that.longitude),
 });

 // 获取当前经纬度对应的地址
 var getAdd = new qq.maps.Geocoder({
 complete : function(result){
 console.log(result);
 that.address = result.detail.address;
 }
 });
 var latLng = new qq.maps.LatLng(that.latitude, that.longitude);
 getAdd.getAddress(latLng);

 //绑定单击事件添加参数
 qq.maps.event.addListener(map, 'click', function(event) {})
 })
 },</pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507180223358-1978866661.png">
在showPosition(position)这个方法里面就会有位置信息，包括经纬度和地址。
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507174819400-849168083.png">
然后根据这里的经纬度就可以调用mapTX()来绘制地图了，但是因为我们需要展示当前定位的位置，而上面打印的并不精确，所以还需要根据获取到当前经纬度对应的详细地址：
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507175054432-112470367.png">
只要获取到了经纬度和详细地址，我们就可以进行打卡了。
<h2>点击事件</h2>
 在地图中是可以添加点击事件的，但是由于这里不需要，所以上面没有写。关于点击事件，主要就是获取点击位置的经纬度就可以继续后续的操作。
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507175531895-1469248594.png">
打印上面代码中点击事件的event
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507175647008-419491835.png">
也就是，我们是可以通过event.latLng.getLat()和event.latLng.getLng()获取到经纬度的，如果还需要获取点击的位置，再调用上面getAdd.getAddress(latLng)方法，传入点击获取的经纬度就可以了。
 <img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507180121686-327441375.png"> 
来源：https://www.cnblogs.com/yuyujuan/p/10825482.html

頁: [1]

琼殿技术论坛's Archiver

vue开发微信公众号--地图