第一次遇到地图的项目，作为一个地图小白，首先不知道用什么地图，就百度了一下vue能使用的地图，就找到了vue-amap,看了一下文档，按照上面步骤，先是在项目里面安装vue-amap:
npm install vue-amap --save
1按照文档「快速上手」里面进行配置：
项目结构为：
|- src/ --------------------- 项目源代码
|- App.vue
|- main.js -------------- 入口文件
|- .babelrc ----------------- babel 配置文件
|- index.html --------------- HTML 模板
|- package.json ------------- npm 配置文件
|- webpack.config.js -------- webpack 配置文件
项目中涉及到的几个文件如下：
.babelrc （这个我没有配）
{
"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>
解决高德地图偏移的问题，其实高德地图是有接口的：
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]
}
解决中心点不居中的问题就是，在 <el-amap :center="center"></el-amap>,在data里面return{center:[121.59996, 31.197646]},然后让center的经纬度时刻跟marker.position的经纬度保持一致，我是只有一个定位的位置，而且是在其他的组件里面进行的位置查看或者定位，所以position的位置我是保存在了vuex的store.js里面的，因此，在computed里面进行监控位置坐标，将marker.position等于监控的位置信息，并且将center也时刻等于监控的位置信息，就能保持锁定的位置在屏幕中间了，这个方法也只是适合我的项目，希望对大家有用。
<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>
