微信地图 leaflet 腾讯地图

本来在微信项目中使用的高德地图，发现不是想象中的好用，而且用了微信，感觉使用腾讯地图会比较方便，所以，索性使用leaflet+腾讯地图的底图来实现。

其中关于正确使用腾讯地图参考了https://github.com/wuxiashuangji/TXMapTitleLayer
1、首先安装leaflet库

yarn add leaflet

2、正常引入leaflet资源

<script src="https://cdn.bootcss.com/leaflet/1.3.1/leaflet.js"></script>
<link href="https://cdn.bootcss.com/leaflet/1.3.1/leaflet.css" rel="stylesheet">

3、创建文件txTileLayer.js

export const TXTileLayer = L.TileLayer.extend({getTileUrl: function (tilePoint) {let urlArgs = nulllet getUrlArgs = this.options.getUrlArgsif (getUrlArgs) {urlArgs = getUrlArgs(tilePoint)} else {urlArgs = {z: tilePoint.z,x: tilePoint.x,y: tilePoint.y}}return L.Util.template(this._url, L.extend(urlArgs, this.options, {s: this._getSubdomain(tilePoint)}))}
})

4、在vue项目中使用

<template><div id="map"></div>
</template>
<script>
import Vue from 'vue'
import { TXTileLayer } from './txTileLayer.js'
export default {data () {return {map: null}},methods: {initLeaflet () {this.map = L.map('map', {center: [23.12262, 113.324579],zoom: 10,maxZoom: 23,minZoom: 3})let url = 'http://rt1.map.gtimg.com/realtimerender/?z={z}&x={x}&y={y}&type=vector&style=1&v=1.1.1'let getUrlArgs = function (tilePoint) {return {// 地图z: tilePoint.z,x: tilePoint.x,y: Math.pow(2, tilePoint.z) - 1 - tilePoint.y}}let options = {subdomain: '012',getUrlArgs: getUrlArgs}const txMap = new TXTileLayer(url, options)txMap.addTo(this.map)// 绑定到vueVue.prototype.leaf = this.map// this.$emit('mapLoad')}},mounted () {this.initLeaflet()}
}
</script>
<style lang="less">
#map {width: 100%;height: 300px;
}
</style>

5、最终效果图

微信地图 leaflet 腾讯地图相关推荐

微信小程序控制硬件第14篇微信小程序腾讯地图控制 4G Cat.1模组，安信可CA-01加载定位显示当前位置。
文章目录一.前言通讯协议技术问题点二.4G模组业务逻辑上报基站信息三.微信小程序控制另外,不要把我的博客作为学习标准,我的只是笔记,难有疏忽之处,如果有,请指出来,也欢迎留言哈! 微信物 ...
微信端唤起腾讯地图并进行导航
微信端唤起腾讯地图并进行导航 $('.companyAdress').on('click',function(){ window.location.href= 'http://apis.map. ...
如何在百度地图、腾讯地图标注公司地址信息?
比如百度地图.腾讯地图.高德地图是可以标注公司位置的,不一定是店铺.所以我们有机会把公司地址在地图里标注出来,这样以后客户拜访时就会非常方便.我们遇到很多朋友都是花了几百块钱做地图标注,实际上这一切都 ...
高德地图只显示一个省_浅谈当下各种导航软件：高德地图、百度地图、腾讯地图...
浅谈当下各种导航软件:高德地图.百度地图.腾讯地图,之前出门找不到路只能靠问路,现在我们生活中出现了各种各样的导航软件,甚至让用户出现了选择困难症,不知道选择哪一款软件比较号,在这里小编就要给大家来分 ...
手机端或PC端利用高德地图和腾讯地图获取用户当前位置信息
目录一.简介二.高德地图三.腾讯地图四.总结一.简介最近在项目中,有需要使用到获取用户当前地理位置信息的功能,获取当前用户位置保存到数据库中的场景,并且需要支持多种地图定位方式,我这里采用 ...
百度地图、高德地图、腾讯地图比较
导读:地图软件已经成为我们必不可少的工具之一,无论是开车还是坐公交,来到一个陌生的地方,总会先用手机查一下具体的路线.可如果是在没有信号手机信号较差的地方,手机地图通常就无法进行导航,而在联网条件下使 ...
百度地图、高德地图和腾讯地图定位不准确的解决方案
需求由于使用我们公司设备的用户分布在全球各地,最近好多设备都坏了,现在我们公司的修理师要去现场修理设备,但是设备太多了,200多个地址,不好找,而且又不能非常一目了然的查看到分布在全国的需要进行设备 ...
高德地图、百度地图、腾讯地图坐标相互转换
高德地图.百度地图.腾讯地图坐标相互转换 1.WGS-84原始坐标系,一般用国际GPS纪录仪记录下来的经纬度,通过GPS定位拿到的原始经纬度,Google和高德地图定位的的经纬度(国外)都是基于WGS ...
Android调用跳转百度地图、高德地图、腾讯地图进行目的地导航
Android App跳转百度地图.高德地图.腾讯地图进行目的地导航. 先放上百度.高德.腾讯地图调起API文档地址,有些参数不懂可以参考. 百度地图:http://lbsyun.baidu.com/ ...

微信地图 leaflet 腾讯地图

微信地图 leaflet 腾讯地图相关推荐

最新文章

热门文章