Vue中如何使用高德地图

// 高德key

key: ‘d6eabbd08f89ccfb74278b36ab6342567’, // 自己到官网申请，我随便写的

// 插件集合 （插件按需引入）

plugin: [‘AMap.Autocomplete’, ‘AMap.PlaceSearch’, ‘AMap.Scale’, ‘AMap.OverView’, ‘AMap.ToolBar’, ‘AMap.MapType’, ‘AMap.PolyEditor’, ‘AMap.CircleEditor’, ‘AMap.MarkerClusterer’],

v: ‘1.4.15’, // 我也不知道为什么要写这个，不写项目会报错，而且我随便写的，跟我下载的版本对应不了

uiVersion: ‘1.0.11’ // ui版本号，也是需要写，不配置不加载,

})

3.页面中使用

---

// 地图配置项

initmapFn() {

var _this = this;

// 创建地图，同时给地图设置中心点、级别、显示模式、自定义样式等属性

_this.map1 = new AMap.Map(“mapChart”, {

resizeEnable: true, //是否监控地图容器尺寸变化

zoom: 3, // 缩放级别

center: [113.3245904, 23.1066805], //中心点坐标

});

//插件依旧写在回调函数内,通过AMap.plugin方法按需引入插件，第一个参数是插件名,第二个是在plugin回调之后使用插件功能。

AMap.plugin([“AMap.ToolBar”, “AMap.Scale”, “AMap.OverView”], function () {

_this.map1.addControl(new AMap.ToolBar());

_this.map1.addControl(new AMap.Scale());

_this.map1.addControl(new AMap.OverView({ isOpen: true }));

});

_this.map1.clearMap();// 清除所有的覆盖物信息

// 创建 infoWindow 实例

// _this.map1.setFitView();

},

// 地图标注

onMarkerMap(data) {

if (data[0]) {

data.forEach((element, index) => {

if (element.lng) {

let marker = new AMap.Marker({

//在回调函数里面创建Marker实例,添加经纬度和标题

position: new AMap.LngLat(element.lng, element.lat), //添加经纬度

offset: new AMap.Pixel(-13, -30), // 偏移量

// title: “广州塔”, // 鼠标移上去时显示的内容

// 可以自定义标记点显示的内容,允许插入html字符串

// content: “

广州塔Content

”,

});

this.map1.add(marker); // 将创建的点标记添加到已有的地图实例：

//marker.setMap(this.map1);

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）