vue-amap-n

vue-amap-new

基于现有现有 vue-amap-search 项目修改，配合自己项目进行了修改，感谢作者 mactive 提供。

A Vue.js amap 高德地图

如何使用

1. 配置参数和你的高德key

window.amapConfig = {
  key: '你的高德地图key'
}

1. 导入js和css,声明component

单一组件内部使用

import AmapSearch from 'vue-amap-search'
import 'vue-amap-search/dist/lib/main.css'
 
export default {
  // 省略
  components:{
      'amap-search': AmapSearch
  }
}

or 全局声明

import Vue from 'vue'
import AmapSearch from 'vue-amap-search'
import 'vue-amap-search/dist/vue-instant.css'
Vue.use(AmapSearch)

html 中使用都是一样的,及得给amap-search设定宽和高,

<amap-search 
  :searchCount="5"
  :autoConfirm="false"
  :useClick="false"
  :width="800"
  :height="340"
  :defaultLng="31.12571"
  :defaultLat="121.327522"
  :dragEnable="false"
  @userInput="handleUserInput"
  @pickedLocation="handlePickedLocation">
</amap-search>

1. event and props

props

• width 宽度 height 高度
• searchCount 返回结果的数量
• autoConfirm 是否自动确认点的地址, 默认 false 不开启 .

默认false, 用户点击确定后才会触发 handlePickedLocation 绑定的事件 如果true,searchCount 会自动变成1

• useClick 是否开启用户单机地图, 默认 false 不开启 .

默认false, 用户点击地图没有反应, 只能搜索结果后拖动图标 如果true,searchCount 会自动变成1

• defaultLng, 设置地图经度
• defaultLat, 设置地图纬度
• dragEnable, 设置地图是否允许拖拽，默认是false

Event

• handleUserInput 输入框中的值
• handlePickedLocation 用户选定坐标,并点击确定后的值

TODO:

• 传入宽和高
• 样式自包含, 不依赖于 bootstrap 3.3版本
• 自动完成鼠标上下选择第三下失效.
• 支持手点位置, 但是只能有一个搜索结果结果
• 去掉sass 改用postcss
• 支持开关确认按钮, 点击确定关闭
• BUG: 拖动POI显示时候错位的问题, 应该是显示的问题
• 做成 amap-search 组件, 组件的实现可以用到mixin
• 优化 webpack task
• 输出组件的ts定义 d.ts文件

Build Setup 二次开发或者fork

 
# 先安装typescript 然后 link
npm install typescript -g
npm link typescript
 
# install dependencies
npm install
 
# serve with hot reload at localhost:3030
npm run dev
 
# build for vue component with js, css with sourcemaps
npm run build:lib
 
# build for example project with vue framework in
npm run build:example