使用script标签的src组件引入地图

文章讲述了在Uniapp项目中,由于公共文件限制,不能全局引入地图脚本,因此采用createElement动态创建script标签,通过onLoad事件确保地图脚本加载后再进行初始化,包括登录和加载插件的过程。
摘要由CSDN通过智能技术生成

因为项目中其他文件都是公共文件,不能再index.html中使用script标签全局引入,在自己的的页面引入,使用的uniapp 所以在onReady中

const script = document.createElement('script');
			script.src = 'https://map.sgcc.com.cn/maps?v=3.0.0';
			document.head.appendChild(script);
			script.onload = () => {

				// 在地图脚本加载完成后,你可以在这里使用地图相关的功能
				this.$nextTick(() => {
					console.log("1111111");
					SGMap.tokenTask
						.login(
							"地图token",
							"地图key"
						)
						.then(function() {
							that.initMap([116.397428, 39.90923]);
							that.loadPlugin();
						});
				});
			};

这里要注意一的是需要等待script标签生成后在执行初始化地图等功能直接使用script标签引入的话会失效,所以这里面使用onload监听完成后在执行初始化操作

使用script标签引入Vue.js时,你可以按照以下步骤编写Vue组件: 1. 首先,在你的HTML文件中引入Vue.jsscript标签。你可以使用以下代码引入Vue.js库: ```html <script src="https://unpkg.com/vue/dist/vue.js"></script> ``` 2. 在页面中定义一个按钮或其他需要使用Vue组件的元素。例如,你可以添加以下代码来创建一个按钮: ```html <button id="my-button">Click me</button> ``` 3. 接下来,我们需要定义Vue组件。你可以在script标签中编写Vue组件的代码。例如,以下代码定义了一个简单的Vue组件: ```html <script> // 在这里定义Vue组件 Vue.component('my-component', { template: '<div>This is my Vue component</div>' }); </script> ``` 4. 然后,我们需要在父页面中使用组件。在Vue的实例中,将该组件作为子组件进行注册。在页面中,你需要添加一个具有id为"app"的div元素,作为Vue实例的挂载点。例如: ```html <div id="app"> <!-- 在这里使用Vue组件 --> <my-component></my-component> </div> ``` 5. 最后,在script标签中实例化Vue,并将Vue实例与页面中的挂载点关联起来。例如,你可以使用以下代码创建Vue实例: ```html <script> new Vue({ el: '#app' }); </script> ``` 通过以上步骤,你可以使用script标签引入Vue.js,并编写简单的Vue组件来与现有的jQuery项目一起使用,实现功能的展示,并确保Vue和jQuery之间不会发生冲突。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue.js 基本知识——基于script标签引入](https://blog.csdn.net/laoyaotask/article/details/94366082)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [script标签引入vue方式开发如何写组件](https://blog.csdn.net/zoomla_CMS/article/details/106008366)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值