1 前言

要在vue項目使用百度地圖api，首先應做以下配置

（1）index.html

index.html添加script

<script src="http://api.map.baidu.com/api?v=3.0&ak=你的百度地圖秘鑰（ak）&callback=bMapInit"></script>

（2）webpack.base.conf.js

webpack.base.conf.js添加externals配置，內容如下，與entry平級

entry: {app: ['babel-polyfill', './src/main.js']},externals: {'BMap': 'BMap'},

（3）組件中引用

import BMap from 'BMap'

隨后便可根據你所需的功能添加相應的地圖api，并作出vue項目應有的更改即可。

2 應用舉例

需求分析：點擊按鈕彈出地圖，地圖可搜索位置，可切換城市，搜索出來的位置需要在地圖中定點，除了搜索外，可以通過拖動地圖然后點擊選擇位置，選擇出來的位置需要記錄經緯度，傳遞到父組件。
實現：本例子不實現點擊按鈕彈出功能，這個比較簡單，fixed定位寫個彈框即可。

實現效果

地圖組件：

父組件：
點擊確定，父組件獲取到經緯度（demo只作打印處理）。

demo地圖組件源碼

<template><div class="map" v-show="visible"><div id="map-core"></div><div class="search"><div id="r-result"><p>搜索定位:</p><input type="text" id="suggestId" value="百度"/></div><div class="lng-lat"><div class="item"><p>當前經度:</p><input type="text" v-model="location.lng"/></div><div class="item"><p>當前緯度:</p><input type="text" v-model="location.lat"/></div><div class="item btn"><button @click="selectLocation">確定</button></div></div></div></div> </template><script> /* eslint-disable */ import BMap from 'BMap' export default {data () {return {location: {lng: '',lat: ''},map: {},ac: {}}},mounted () {this.setMap()this.setSearch()},methods: {// 初始化地圖setMap () {this.map = new BMap.Map('map-core')this.map.centerAndZoom(new BMap.Point(113.275, 23.117), 10)// 地圖縮放控件const topLeftControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT})// 城市選擇控件const cityListControl = new BMap.CityListControl({anchor: BMAP_ANCHOR_TOP_RIGHT})// 比例尺控件const topLeftNavigation = new BMap.NavigationControl()this.map.addControl(topLeftControl)this.map.addControl(topLeftNavigation)this.map.addControl(cityListControl)const _this = this// 鼠標縮放setTimeout(function () {_this.map.setZoom(11)}, 2000) // 2秒后放大到11級this.map.enableScrollWheelZoom(true)// 點擊獲取經緯度this.map.addEventListener('click', function (e) {_this.location.lng = parseFloat(e.point.lng).toFixed(3)_this.location.lat = parseFloat(e.point.lat).toFixed(3)})},// 根據經緯度繪制地圖中的坐標點drawLocation () {if(this.location.lng !== "" && this.location.lat !== ""){this.map.clearOverlays()const new_point = new BMap.Point(this.location.lng, this.location.lat)const marker = new BMap.Marker(new_point)this.map.addOverlay(marker)this.map.panTo(new_point) }},// 搜索位置功能實現setSearch () {const _this = this//建立一個自動完成的對象this.ac = new BMap.Autocomplete({"input" : "suggestId", "location" : _this.map})//鼠標放在下拉列表上的事件this.ac.addEventListener("onhighlight", function(e) {let str = ""let _value = e.fromitem.valuelet value = ""if (e.fromitem.index > -1) {value = _value.province + _value.city + _value.district + _value.street + _value.business}value = ""if (e.toitem.index > -1) {_value = e.toitem.valuevalue = _value.province + _value.city + _value.district + _value.street + _value.business}})let myValue//鼠標點擊下拉列表后的事件this.ac.addEventListener("onconfirm", function(e) {let _value = e.item.valuemyValue = _value.province + _value.city + _value.district + _value.street + _value.business_this.setPlace(myValue)});},setPlace (myValue) {const _this = this//清除地圖上所有覆蓋物this.map.clearOverlays()//智能搜索this.local = new BMap.LocalSearch(_this.map, {onSearchComplete: _this.onSearchComplete});this.local.search(myValue);},onSearchComplete () {//獲取第一個智能搜索的結果let pp = this.local.getResults().getPoi(0).pointthis.location.lng = parseFloat(pp.lng).toFixed(3)this.location.lat = parseFloat(pp.lat).toFixed(3)this.map.centerAndZoom(pp, 18)//添加標注this.map.addOverlay(new BMap.Marker(pp))},// 向父組件傳遞經緯度selectLocation () {this.$emit('selectLocation', this.location)}},watch: {'location': {handler () {this.drawLocation()},deep: true},visible () {console.log('ddd')}} } </script><style lang="less" scoped>.map {width: 100%;height: 100%;font-size: 14px;#map-core {width: 100%;height: 90%;}.search {display: flex;margin-top: 10px;height: 40px;#r-result {display: flex;height: 20px;line-height: 20px;p {height: 20px;padding-right: 10px;}input {width: 180px;height: 20px;}}.lng-lat {display: flex;.item {display: flex;padding-left: 10px;height: 20px;line-height: 20px;p {height: 20px;padding-right: 10px;}input {width: 100px;height: 20px;}button {color: #fff;height: 28px;width: 60px;background: #40B0FF;border: 1px solid #40B0FF;border-radius: 2px;&:hover {background: #10B0FF;border: 1px solid #10B0FF;cursor: pointer;}}}}}} </style>

地圖父組件中使用方法

<v-map @selectLocation="selectLocation"></v-map>

methods

selectLocation (location) {console.log(location)console.log(parseFloat(location.lng))console.log(parseFloat(location.lat))}

解析請看代碼中的注釋，本例子旨在于舉例vue項目使用百度地圖的方法，僅注重js實現，css部分有情趣請自行改善，有錯誤歡迎指出。
友情鏈接：百度地圖api官網：http://lbsyun.baidu.com/jsdemo.htm#lite_2_1

總結

以上是生活随笔為你收集整理的Vue项目使用百度地图——经纬度地图组件的封装及使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。