引入 public /index 下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="referrer" content="no-referrer">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己申请的ak"></script>
<title><%= webpackConfig.name %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
element ui
<div
title="地图"
:visible.sync="dialogMap"
width="65%"
:append-to-body="true">
<div class="el-modal-body">
<template>
<div>
<el-row :gutter="10">
<el-col :span="2"><el-button type="primary" @click="fixedPos">定位</el-button></el-col>
<el-col :span="2" class="map-top-label">当前经度</el-col>
<el-col :span="3">
<el-input v-model="longitude" />
</el-col>
<el-col :span="2" class="map-top-label">当前纬度</el-col>
<el-col :span="3">
<el-input v-model="latitude" />
</el-col>
<el-col :span="10"><el-input v-model="keyWords" placeholder="请输入要搜索的地址" /></el-col>
<el-col :span="2"><el-button type="primary" @click="setPlace">搜 索</el-button></el-col>
</el-row>
<div id="map" ></div>
</div>
</template>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogMap = false">取 消</el-button>
<el-button type="primary" @click="dialogMap = false">确 定</el-button>
</span>
</div>
方法
export default {
data() {
return {
map: null,//地图
local: null,//地址
mk: null,//标注
latitude: '',//纬度
longitude: '',//经度
keyWords: '',//地图
}
},
mounted() {
this.initMap()
},
methods: {
//地图
initMap(){
this.map = new BMap.Map('map')
//设置初始地图显示在哪个地方，例如北京颐和园（116.278362,40.006076）
let point = new BMap.Point(116.278362,40.006076)
this.map.centerAndZoom(point, 10) //初始化地图，设置城市和地图级别
this.map.addOverlay(new BMap.Marker(point));//定点坐标红点覆盖
this.map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
this.map.addControl(new BMap.NavigationControl())
var that=this
//点击事件
this.map.addEventListener("click", function(e){
that.latitude=that.latitude
that.longitude = that.longitude
//获取地图上所有的覆盖物，
var allOverlay = that.map.getOverlays();
for(var i = 0;i<allOverlay.length;i++) {
if(allOverlay[i].toString()=="[object Marker]"){
if (allOverlay[i].getPosition().lng == that.longitude && allOverlay[i].getPosition().lat == that.latitude) {
that.map.removeOverlay(allOverlay[i]);
}
}
}
//通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
that.latitude = e.point.lat
that.longitude = e.point.lng
point = new BMap.Point(that.longitude, that.latitude)
that.map.addOverlay(new BMap.Marker(point));//定点坐标红点覆盖
})
},
// 点击定位-定位到当前位置
fixedPos() {
const _this = this
const geolocation = new BMap.Geolocation()
this.confirmLoading = true
geolocation.getCurrentPosition(function(r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
_this.handleMarker(_this, r.point)
let myGeo = new BMap.Geocoder()
myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result) {
_this.confirmLoading = false
if (result) {
_this.latitude = result.point.lat
_this.longitude = result.point.lng
}
})
} else {
_this.$message.error('failed' + this.getStatus())
}
})
},
// 搜索地址
setPlace() {
this.local = new BMap.LocalSearch(this.map, {
onSearchComplete: this.searchPlace
})
this.local.search(this.keyWords)
},
searchPlace() {
if (this.local.getResults() != undefined) {
this.map.clearOverlays() //清除地图上所有覆盖物
if (this.local.getResults().getPoi(0)) {
let point = this.local.getResults().getPoi(0).point //获取第一个智能搜索的结果
this.map.centerAndZoom(point, 18)
this.handleMarker(this, point)
console.log('经度：'+ point.lng + '--' + '纬度' + point.lat)
this.latitude = point.lat
this.longitude = point.lng
} else {
this.$message.error('未匹配到地点!')
}
} else {
this.$message.error('未找到搜索结果!')
}
},
// 设置标注
handleMarker(obj, point) {
obj.mk = new BMap.Marker(point)
obj.map.addOverlay(obj.mk)
obj.mk.enableDragging() // 可拖拽
obj.mk.addEventListener('dragend', function(e) { // 监听标注的拖拽，获取拖拽后的经纬度
this.latitude = point.lat
this.longitude = point.lng
})
obj.map.panTo(point)
},
},
}
备注：
记得给map地图 长宽
<style lang="scss" scoped>
#map{
height: 400px;
width: 100%px;
</style>
网友评论