百度地图Api使用：定制自定义组件的简单写法

最新推荐文章于 2022-09-29 15:20:22 发布

sunny_1219

最新推荐文章于 2022-09-29 15:20:22 发布

阅读量552

点赞数

分类专栏：前端文章标签： vue html js

本文链接：https://blog.csdn.net/sunny_1219/article/details/113462952

版权

本文介绍了在Vue2.0和ElementUI环境下，如何利用BaiduMap JavaScript API创建自定义组件。针对官方API中使用原生JS编写复杂组件的繁琐问题，提出将组件模板化，通过document.getElementById获取DOM并添加到自定义组件中的解决方案，简化了开发流程。

摘要由CSDN通过智能技术生成

百度地图Api使用：定制自定义组件的简单写法

前言
一、官方Api的使用方法
二、改善方法
- 1.思路
- 2.示例
总结

前言

技术栈：vue2.0，elementUI，BaiduMap JavaScript2.0。
适用：自定义组件比较复杂，js写html和css过程繁杂。

一、官方Api的使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		body, html {
   
			width: 100%;
			height: 100%;
			margin:0;
			font-family:"微软雅黑";
		}
		#container{
   
			width:100%;
			height:100%;
            overflow: hidden;
		}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
	<title>自定义控件</title>
</head>
<body>
    <div id="container"></div>
    <script>
        var map = new BMapGL.Map('container');
        map.