本來在微信項目中使用的高德地圖，發現不是想象中的好用，而且用了微信，感覺使用騰訊地圖會比較方便，所以，索性使用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 腾讯地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。