第一次遇到地圖的項(xiàng)目，作為一個(gè)地圖小白，首先不知道用什么地圖，就百度了一下vue能使用的地圖，就找到了vue-amap,看了一下文檔，按照上面步驟，先是在項(xiàng)目里面安裝vue-amap:
? ? npm install vue-amap --save
1按照文檔「快速上手」里面進(jìn)行配置：
項(xiàng)目結(jié)構(gòu)為：
? ? |- src/ --------------------- 項(xiàng)目源代碼
? ? ? ? |- App.vue
? ? ? ? |- main.js? -------------- 入口文件
? ? |- .babelrc? ----------------- babel 配置文件
? ? |- index.html? --------------- HTML 模板
? ? |- package.json? ------------- npm 配置文件
? ? |- webpack.config.js? -------- webpack 配置文件
項(xiàng)目中涉及到的幾個(gè)文件如下：
? ? .babelrc? （這個(gè)我沒有配）
? ? {
? ? ?"presets": [
? ? ? ? ["es2015", { "modules": false }]
? ? ? ]
? ? }
webpack.config.js
? ? var path = require('path')
? ? var webpack = require('webpack')
? ? module.exports = {?
? ? ? ?entry: './src/main.js',?
? ? ? ?output: {?
? ? ? ? ?path: path.resolve(__dirname, './dist'),?
? ? ? ? ?publicPath: '/dist/', filename: 'build.js' },?
? ? ? ? ?module: {?
? ? ? ? ? ? loaders: [?
? ? ? ? ? ? ? { test: /\.vue$/, loader: 'vue-loader' },?
? ? ? ? ? ? ? { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
? ? ? ? ? ? ? { test: /\.css$/, loader: 'style-loader!css-loader' }?
? ? ? ? ? ? ] },?
? ? ? ? ? ?performance: { hints: false },?
? ? ? ? ? ?devServer: { historyApiFallback: true, noInfo: true },?
? ? ? ? ? ?devtool: '#eval-source-map'
? ? ? ? }
? ? ? ?if (process.env.NODE_ENV === 'production') {?
? ? ? ? ? ? module.exports.devtool = '#source-map'? ? ?// http://vue-loader.vuejs.org/en/workflow/production.html?
? ? ? ? ? ? ?module.exports.plugins = (module.exports.plugins || []).concat([?
? ? ? ? ? ? ? ? new webpack.DefinePlugin({
? ? ? ? ? ? ? ? ? ?'process.env': {?
? ? ? ? ? ? ? ? ? ? ? NODE_ENV: '"production"'?
? ? ? ? ? ? ? ? ? ?} }),?
? ? ? ? ? ? ? ?new webpack.optimize.UglifyJsPlugin({?
? ? ? ? ? ? ? ? ? compress: {?
? ? ? ? ? ? ? ? ? ? ? warnings: false?
? ? ? ? ? ? ? ? }?
? ? ? ? ? ?})??
? ? ? ?])
? ? }
main.js
App.vue
<template>
? <div class="amap-page-container">
? ? <el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :center="center" :zoom="zoom" :plugin="plugin" :events="events"? ? ? ? ? ?class="amap-demo"></el-amap>
? </div>
</template>
<style>
.amap-demo {
? ? ? height: 300px;
? ? }
</style>
<script>
? ? ? // NPM 方式
? ? // import { AMapManager } from 'vue-amap';
? ? // CDN 方式
? ? let amapManager = new VueAMap.AMapManager();
? ? module.exports = {
? ? ? data: function() {
? ? ? ? return {
? ? ? ? ? amapManager,
? ? ? ? ? zoom: 12,
? ? ? ? ? center: [116.397142, 39.908617],
? ? ? ? ? },
? ? ? ? ? plugin: ['ToolBar', {
? ? ? ? ? ? pName: 'MapType',
? ? ? ? ? ? defaultType: 0,
? ? ? ? ? ? }
? ? ? ? ? }]
? ? ? ? };
? ? ? }
? ? };
</script>? ?
解決高德地圖偏移的問題，其實(shí)高德地圖是有接口的：
if (+longitude && +latitude) {
let protocol = window.location.protocol ||'https:'
? let type ='gps'
? let key ='xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
? let url =`${protocol}//restapi.amap.com/v3/assistant/coordinate/convert`
? url +='?locations=' + longitude +',' + latitude
? url +='&coordsys=' + type +'&output=json'
? url +='&key=' + key
let output =[0,0]
$.ajax({
type:'GET',
url:url,
async:false,
success:function(res){
output =?res['data'].locations.split(',')
}
})
return output;
}else {
return [0, 0]
}
解決中心點(diǎn)不居中的問題就是，在? ? <el-amap :center="center"></el-amap>,在data里面return{center:[121.59996, 31.197646]},然后讓center的經(jīng)緯度時(shí)刻跟marker.position的經(jīng)緯度保持一致，我是只有一個(gè)定位的位置，而且是在其他的組件里面進(jìn)行的位置查看或者定位，所以position的位置我是保存在了vuex的store.js里面的，因此，在computed里面進(jìn)行監(jiān)控位置坐標(biāo)，將marker.position等于監(jiān)控的位置信息，并且將center也時(shí)刻等于監(jiān)控的位置信息，就能保持鎖定的位置在屏幕中間了，這個(gè)方法也只是適合我的項(xiàng)目，希望對(duì)大家有用。
<div class="map">
<el-amap vid="amap" :center="center" :zoom="zoom">
<el-amap-marker v-for="(marker,index) inmarkers" :key="index" :position="marker.position = [lng, lat]" :isHotspot="open" ></el-amap-marker>
</el-amap>
</div>
<script>
import storefrom '../../store/store'? ? ?
export default {
store,
? data () {
return {
markers: [],
? ? ? center: [116.397142, 39.908617],
? ? ? open:true,
? ? ? zoom:12,
? ? ? plugin: [{
? ? ? ? ? ? pName:'Geolocation'
? ? ? }]
}
},
? computed: {
? ? ? lng () {
? ? ? ? this.center = [this.$store.state.lng, this.$store.state.lat]
? ? ? ? return this.$store.state.lng
? ? ? },
? ? ? lat () {
? ? ? ? this.center = [this.$store.state.lng, this.$store.state.lat]
? ? ? ? return this.$store.state.lat
? ? ? }
? },
? methods: {
},
? mounted () {
? ? this.markers = [
? ? {
? ? ? ? position: [this.lng, this.lat]
? ? }]
? ?}
}
</script>
? ? ? ?
? ? ?
? ? ? ?
? ? ? ?
? ? ? ?
? ?
? ? ?
? ? ? ?
? ? ? ?
? ? ? ?
? ?
? ? ?
? ? ? ?
? ? ? ?
? ? ? ?
? ? ?
? ? ? ?
? ? ? ?
? ? ? ?
