vue使用百度地圖

来源:https://www.cnblogs.com/ziguiyu/archive/2018/06/07/9152728.html
-Advertisement-
Play Games

1.在百度地圖申請密鑰:http://lbsyun.baidu.com/ 將 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密鑰" ></script> 中的密鑰替換成你申請的,在vue項目的ind ...


1.在百度地圖申請密鑰:http://lbsyun.baidu.com/ 將

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密鑰" ></script> 中的密鑰替換成你申請的,在vue項目的index.html引用。 2. 在build 文件下下的 webpack.base.conf.js貼入代碼
externals: {
    "BMap": "BMap"
  },

3. map.vue代碼(demo可以直接使用,demo使用了vue-clipboard2插件,請自行安裝)

<template>
    <div>
        <el-row >
         <el-col :offset="2" :span="8">
             <el-input :id="suggestId" v-model="address_detail"  :clearable='clearable' placeholder="請輸入店鋪地址,獲取店鋪坐標" >
            </el-input> 
        </el-col>
        <el-col :span="2">
            <el-button id="position" @click="search"  type="primary">定位</el-button>
        </el-col> 
        <el-col :span="12" >
          <el-tag type="success" v-clipboard:copy="userlocation.lng" v-clipboard:success="onCopy" v-clipboard:error="onError" >經度 {{userlocation.lng}}</el-tag>
          <el-tag type="success" v-clipboard:copy="userlocation.lat" v-clipboard:success="onCopy" v-clipboard:error="onError">緯度 {{userlocation.lat}}</el-tag>
          <el-tag type="success" ><<<<點擊左側按鈕複製經緯度信息</el-tag>
        </el-col>  
    </el-row>
    <el-row>
       <el-col :offset="2" :span="18">
            <div id="map_canvas" class="allmap"></div>
       </el-col>
    </el-row>
    </div>
</template>
<script>
export default {
  data() {
    return {
      address_detail: "", //詳細地址
      userlocation: { lng: "", lat: "" },
      clearable: true,
      suggestId: "suggestId",
      map : {},
      mk: {}
    };
  },
  created () {
    
  },
  methods: {
     drawMap() {
        this.map = new BMap.Map("map_canvas");                // 創建地圖實例
        this.map.addControl(new BMap.NavigationControl());           // 啟用放大縮小 尺
        this.map.enableScrollWheelZoom();
        this.getlocation();//獲取當前坐標, 測試時獲取定位不准。
  
        var point = new BMap.Point(this.userlocation.lng, this.userlocation.lat);  // 創建點坐標  
        this.map.centerAndZoom(point, 13);                 // 初始化地圖,設置中心點坐標和地圖級別  
        var marker = new BMap.Marker(point);        // 創建標註    
        this.map.addOverlay(marker);                     // 將標註添加到地圖中
        
        var ac = new BMap.Autocomplete({
        //建立一個自動完成的對象
        input: "suggestId",
        location: this.map
        });
        var myValue;
      ac.addEventListener("onconfirm", (e)=> {
        //滑鼠點擊下拉列表後的事件
        var _value = e.item.value;
        myValue =_value.province +_value.city +_value.district +_value.street +_value.business;
        this.address_detail = myValue;
        this.setPlace();
      });
     },
     getMarker (point) {
                this.mk = new BMap.Marker(point);  
                this.mk.addEventListener("dragend", this.showInfo);
                this.mk.enableDragging();    //可拖拽 
                this.getAddress(point);
                this.map.addOverlay(this.mk);//把點添加到地圖上  
                this.map.panTo(point); 
     },
     getlocation () {
        //獲取當前位置
        var geolocation = new BMap.Geolocation();  
        geolocation.getCurrentPosition((r) =>{  
            if(geolocation.getStatus() == BMAP_STATUS_SUCCESS){  
                this.getMarker(r.point);
                this.userlocation = r.point;
            }else {  
                alert('failed'+this.getStatus());  
            }  
        });
     },
      //綁定Marker的拖拽事件
         showInfo(e){
            var gc = new BMap.Geocoder();
            gc.getLocation(e.point, (rs)=>{
                var addComp = rs.addressComponents;
                var address = addComp.province +  addComp.city + addComp.district + addComp.street + addComp.streetNumber;//獲取地址
                
                //畫圖 ---》顯示地址信息
                var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
                this.map.removeOverlay(this.mk.getLabel());//刪除之前的label 

                this.mk.setLabel(label);
                this.address_detail = address;
                this.userlocation = e.point;
                
             });
        },
         //獲取地址信息,設置地址label
         getAddress(point){
            var gc = new BMap.Geocoder();
            
            gc.getLocation(point, (rs)=>{
                var addComp = rs.addressComponents;
                var address =  addComp.province +  addComp.city + addComp.district + addComp.street + addComp.streetNumber;//獲取地址
                
                //畫圖 ---》顯示地址信息
                var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
                this.map.removeOverlay(this.mk.getLabel());//刪除之前的label 
                this.address_detail = address;
                this.mk.setLabel(label);
                
             });
             
        },
        setPlace() {
        this.map.clearOverlays(); //清除地圖上所有覆蓋物
        var th = this
        function myFun() {
          th.userlocation = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果
          th.map.centerAndZoom(th.userlocation, 18);
          th.getMarker(th.userlocation);
        }

        var local = new BMap.LocalSearch(this.map, {
          onSearchComplete: myFun //智能搜索
        });
        local.search(this.address_detail);
      },
     search () {
             var localSearch = new BMap.LocalSearch(this.map);
             localSearch.enableAutoViewport(); //允許自動調節窗體大小
             this.searchByInputName(localSearch);
 },
     searchByInputName(localSearch) {
          this.map.clearOverlays(); //清空原來的標註
          var th = this;
          var keyword = this.address_detail;
          localSearch.setSearchCompleteCallback(function(searchResult) {
             var poi = searchResult.getPoi(0);
             th.userlocation = poi.point;
             th.map.centerAndZoom(poi.point, 13);
             th.getMarker(th.userlocation);
        });
          localSearch.search(keyword);
      },
      onCopy () {
          this.$message('內容已複製到剪貼板!');
      },
      onError () {
          this.$message('內容複製失敗,請重試!');

      }
        
  },
  mounted() {
    this.$nextTick(function() {
     this.drawMap();
    });
    
  }
};
</script>
<style scoped>
.allmap {
  width: 100%;
  height: 400px;
  font-family: "微軟雅黑";
  border: 1px solid green;
}
.el-tag {
  cursor: pointer;
}
</style>

  希望對大家有幫助!

 

 

 

 

 

  

 

 

 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 這個圖片里的時間不用都記住,只需要記住一些特殊的,1993年,1995年(在W3C接手以後,才有了真正意義上的標準),1999年這幾個時間 WHATWG的目的是推廣HTML的標準,HTML5是瀏覽器廠商搞得 IETF簡介:IETF是英文Internet Engineering Task Force ...
  • 昨天練習寫了這個小demo,個人覺得通過設置定位元素left和top的值,來實現換行的功能,這種方法很巧妙~ 另外,如下代碼中的隨機顏色的獲取,還請各位前輩多多指教:需要改進的地方;或者有沒有更好的方法。 ...
  • 解決antd-mobile和css module衝突,css module的使用方式 ...
  • 對於前端的學習網上已經有許多教學和建議,但老話說的好:適合自己的才是最好的。所以本人也在此特地整理一下前端方向的學習資料。 搜索引擎 Google 谷歌 Bing 必應 Sougou 搜狗 Baidu 百度 高質量的問答社區 stackoverflow 知乎 前端Web開發資源整理 前端Web開發資 ...
  • 1. 什麼是媒體查詢 媒體查詢可以根據當前顯示設備的特性(如: 視口寬度, 屏幕比例,設備顯示方向)為其添加css樣式, 使用媒體查詢可以在不改變頁面內容的情況下為特定的設備顯示特定的樣式。如果沒有媒體查詢就不能。媒體查詢能夠幫助我們更方便的判斷當前設備特性(視口寬度等),更方便的針對視口設置合適的 ...
  • 有一個一個裝逼的同事,寫了一段代碼 function a(){} a.__proto__.__proto__.__proto__ 然後問我,下麵這個玩意a.__proto__.__proto__.__proto__是啥,然後我一臉懵逼,prototype還知道一點,這個__proto__,還來三個, ...
  • 一、什麼是HTML 在瞭解html5之前,首先要說一下html語言,儘管是更新後的5,但很多的地方還是保留了html的優勢。 HTML是HyperText Markup Language超級文本標記語言的縮寫,是標準通用標記語言下的一個應用,也是一種規範,一種標準,它通過標記符號來標記要顯示的網頁中 ...
  • 上篇文章總結了塊級元素和行內元素 這篇文章總結了有關盒子模型的知識,助於梳理知識 首先,什麼是盒子模型我們知道,html文檔中,基本上每個元素都可以看作一個盒子,我們稱之為盒子模型。 盒子模型的組成盒子模型包含四個重要的部分:content(width、height):盒子內容寬高padding:內 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...