vue中引入并使用高德地图

这里写目录标题

    • 一、使用npm引入高德地图
    • 二、小试牛刀----修改鼠标样式

一、使用npm引入高德地图

1.进入高德开放平台
2.点击: 开发支持---------地图JS AP---------JSAPI的加载
vue中引入并使用高德地图_第1张图片
vue中引入并使用高德地图_第2张图片
3.选择 按NPM方式使用loader

vue中引入并使用高德地图_第3张图片
4.定义一个有宽高的div
在这里插入图片描述

vue中引入并使用高德地图_第4张图片

二、小试牛刀----修改鼠标样式

先放效果图,右下角是可供选择的鼠标样式
vue中引入并使用高德地图_第5张图片

1.点击示例中心---------地图的创建---------地图属性-------设置鼠标样式
vue中引入并使用高德地图_第6张图片
vue中引入并使用高德地图_第7张图片

右侧有示例代码
vue中引入并使用高德地图_第8张图片
下图是自己写的代码,需要注意几点
(1)官方代码绑定的click事件传递的this 指当前点击元素,但是vue是没有的,在这里可以不传参,也可以传递$event
(2)官方代码的target.value获取到的是 点击元素(input)的value值,这里对应该元素下target属性里的defaultVaule属性
vue中引入并使用高德地图_第9张图片

所有属性到参考手册查找,按住ctrl并且点击就能在新窗口打开

vue中引入并使用高德地图_第10张图片

你可能感兴趣的:(数据可视化,前端)