vue3项目引入maptalks+百度地图做图层（无需百度地图的key）

操作非常简单，可自定义地图的一些事件和UI。是一个很不错的工具库。首先，下载依赖包maptalks.js

npm i maptalks

然后，在需要的vue页面里引入maptalks，也可以全局引入。

import 'maptalks/dist/maptalks.css';
import * as maptalks from 'maptalks';

样式和js都需要引入。
最后，在mounted函数里new一个就可以用了，必须在mounted生命周期里，否则dom还没挂在无法在dom上生成示例。

<div id=map></div>//必须保证盒子有宽高
onMounted(() => {
	nextTick(()=>{
   var map = new maptalks.Map('map', {
     	 center: [121.26143123, 30.186465123],
    	 zoom: 30,
   		 pitch:20,
      	 minZoom: 10,
     	 maxZoom: 19,
         attribution: false,
         spatialReference: {
        projection: 'baidu'
      },
      baseLayer: new maptalks.TileLayer('base', {
      urlTemplate:'https://maponline{s}.bdimg.com/tile/?qt=vtile&styles=pl&from=jsapi2_0&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=',
                    subdomains: [0, 1, 2, 3],
      }),
    });
			})
			})

这里最好用到nextTick，因为它用于延迟执行回调函数，直到DOM更新完成后。这个功能在需要基于最新DOM状态执行操作时特别有用。
urlTemplate：里面的东西就是用到了百度地图的模板。

最后的效果，后续会出如何写一些自定义的事件和UI.