学计算机网站建设,wordpress显示图片慢,wordpress 集成环境,网站开发专业术语本来在微信项目中使用的高德地图#xff0c;发现不是想象中的好用#xff0c;而且用了微信#xff0c;感觉使用腾讯地图会比较方便#xff0c;所以#xff0c;索性使用leaflet腾讯地图的底图来实现。
其中关于正确使用腾讯地图参考了https://github.com/wuxiashuangji/TX…本来在微信项目中使用的高德地图发现不是想象中的好用而且用了微信感觉使用腾讯地图会比较方便所以索性使用leaflet腾讯地图的底图来实现。
其中关于正确使用腾讯地图参考了https://github.com/wuxiashuangji/TXMapTitleLayer 1、首先安装leaflet库
yarn add leaflet2、正常引入leaflet资源
script srchttps://cdn.bootcss.com/leaflet/1.3.1/leaflet.js/script
link hrefhttps://cdn.bootcss.com/leaflet/1.3.1/leaflet.css relstylesheet3、创建文件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项目中使用
templatediv idmap/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}typevectorstyle1v1.1.1let 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 langless
#map {width: 100%;height: 300px;
}
/style5、最终效果图
