vue amap

一、專案介紹

基於vue-admin-template為模板，開發的vue版本的高德地圖JSAPI2.0。寫原因是因為我曾經開發時遇到很多的問題，還有就是開發時遇到的一些坑（當時使用的是百度地圖，後期也用到高德地圖）。因此，利用工作之餘的時間寫了一個vue版本的高德地圖範例中心，由於本人是一名Java開發，前端水平有限，寫的不好的地方，還望各位前端大佬口下留情。

專案參考高德地圖JSAPI2.0範例中心開發，範例網址：https://lbs.amap.com/demo/list/jsapi-v2，如有侵權，請聯絡信箱：[email protected]刪除。

高德地圖官網參考手冊：https://lbs.amap.com/api/jsapi-v2/documentation

二、線上體驗

• admin/111111

示範網址：https://amap.java521.com

三、使用

3.1、Build Setup

 # 克隆项目
git clone git clone https://gitee.com/java5219/vue-amap.git

# 进入项目目录
cd vue-amap

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

瀏覽器造訪http://localhost:9528

3.2、發布

 # 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod

3.3、其它

 # 预览发布环境效果
npm run preview

# 预览发布环境效果 + 静态资源分析
npm run preview -- --report

# 代码格式检查
npm run lint

# 代码格式检查并自动修复
npm run lint -- --fix

四、高德地圖

4.1、 註冊成為開發者

1.報名網址：https://lbs.amap.com/dev/id/choose

2、選擇開發者類型

• 個人開發者
• 企業開發者

3、完善開發者訊息

4.2、進入控制台

1.控制台位址：https://console.amap.com/dev/index

2、選擇應用管理--我的應用

3、建立新應用，輸入應用程式名稱選擇應用程式類型

4.新增key，輸入key名稱，服務平台選擇Web端(JS API）

4.3、在專案中使用

1.找到public/index.html文件，替換為自己的key

2、如果有用到自訂地圖

• 自訂地圖範本網址：https://lbs.amap.com/dev/mapstyle/index
• 自訂地圖分為兩種
  • 使用官方地圖樣式
  • 建立和使用自訂地圖
  • 設定地圖的顯示內容

4.4、使用官方地圖樣式

設定地圖樣式的方式有兩種：

• 在地圖初始化時設定：

  JavaScript

   var map = new AMap . Map ( 'container' , {
      mapStyle : 'amap://styles/whitesmoke' , //设置地图的显示样式
  } ) ;

• 地圖建立之後使用Map物件的setMapStyle方法來修改：

  JavaScript

   var map = new AMap . Map ( 'container' , {
      zoom : 10 , //设置地图的缩放级别
  } ) ;
  map . setMapStyle ( 'amap://styles/whitesmoke' ) ; 

4.5、使用自訂地圖

首先，註冊成為高德地圖開放平台的開發者。然後，在自訂地圖平台進行建立、編輯、發布後，取得地圖樣式ID 。

設定自訂地圖的方式有兩種：

• 地圖初始化時，設定自訂地圖：

  JavaScript

   var map = new AMap . Map ( 'container' , {
      mapStyle : 'amap://styles/地图样式ID' , //设置地图的显示样式
  } ) ;

• 地圖建立之後使用Map物件的setMapStyle方法進行地圖樣式的變更：

  JavaScript

   var map = new AMap . Map ( 'container' ,{
      zoom : 10 , //设置地图的缩放级别
  });
  map . setMapStyle ( 'amap://styles/地图样式ID' );

4.6、設定地圖的顯示內容

透過setFeatures方法設定顯示部分底圖元素：

JavaScript

 map.setFeatures("road");  // 单一种类要素显示
map.setFeatures(['road','point']); // 多个种类要素显示

目前支援以下四種地圖要素的選擇性顯示：

名稱	說明
bg	區域面
point	興趣點
road	道路及道路標註
building	建築物