地图map

``` 查询地点 searchplace() { console.log('执行了搜索'); this.geoCode(); } geoCode() { console.log('执行了Geocode

混合使用（vue-amap与原生API混合使用） 只想通过 vue-amap 引入高德地图，而部分实例化的操作直接基于高德地图的 sdk 完成 实例化操作不是加载地图，简单来说就是用一些属性去实例化地

1.npm 安装 vue  main.js引入 3.使用地图的组件页面引入 4.使用 此时若运行项目，会报错‘XXX  is  not defined’  （此处XXX包括不限于AMap、AMapUI

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51b08b6aca3c44d0891205cb69a16253~tplv

AMapUI 组件库和JSAPI版本的对应关系；JSAPI v2.0 版本需要使用AMapUI 组件库的 v1.1版本。

参考文档： https://lbs.amap.com/api/javascript-api/guide/layers/canvaslayer

https://lbs.amap.com/api/javascript-api/guide/map/state

vue-amap的简单demovue-amap的简单demovue-amap的简单demovue-amap的简单demo

1.我用的是vue组件，在marker中添加events点击事件， 2.这个点击事件需要写在data里 如果要得到点击图标时相对应的一些数据，需要在target里寻找， 这里还需要在组件上绑定一个变量

1. 下载依赖 npm i vue-amap --save 2. 初始化组件 在项目中全局初始化一次即可，你可以写在main.js中。 3. 加载地图 4. 加载点 5. 添加点击事件 我查阅vue-

在antd pro内使用vue-amap，实现地图和坐标点。 1，安装 2，在main,js内引入 3.在vue中使用 template script