数据可视化|vue中引入并使用高德地图


这里写目录标题

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

一、使用npm引入高德地图 1.进入高德开放平台
2.点击: 开发支持---------地图JS AP---------JSAPI的加载
数据可视化|vue中引入并使用高德地图
文章图片

数据可视化|vue中引入并使用高德地图
文章图片

3.选择 按NPM方式使用loader
数据可视化|vue中引入并使用高德地图
文章图片

4.定义一个有宽高的div
数据可视化|vue中引入并使用高德地图
文章图片

数据可视化|vue中引入并使用高德地图
文章图片

二、小试牛刀----修改鼠标样式 先放效果图,右下角是可供选择的鼠标样式
数据可视化|vue中引入并使用高德地图
文章图片

1.点击示例中心---------地图的创建---------地图属性-------设置鼠标样式
数据可视化|vue中引入并使用高德地图
文章图片

数据可视化|vue中引入并使用高德地图
文章图片

右侧有示例代码
数据可视化|vue中引入并使用高德地图
文章图片

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

所有属性到参考手册查找,按住ctrl并且点击就能在新窗口打开
【数据可视化|vue中引入并使用高德地图】数据可视化|vue中引入并使用高德地图
文章图片

    推荐阅读