wangqing
4 years ago
7 changed files with 324 additions and 3 deletions
@ -0,0 +1,26 @@ |
|||
let amapKey = process.env.VUE_APP_MAP_KEY |
|||
let amapVersion = '2.0' |
|||
let _createScript = url => { |
|||
let jsapi = document.createElement('script') |
|||
jsapi.charset = 'utf-8' |
|||
jsapi.src = url |
|||
document.head.appendChild(jsapi) |
|||
} |
|||
|
|||
export default () => { |
|||
return new Promise((resolve, reject) => { |
|||
if (!window.AMap) { // 判断window下有没有AMap对象，再判断是否引入cdn地图
|
|||
_createScript(`https://webapi.amap.com/maps?v=${amapVersion}&key=${amapKey}.Key&callback=aMapInitCallback`) |
|||
window.aMapInitCallback = () => { |
|||
_createScript('//webapi.amap.com/ui/1.1/main.js&callback=amapUiCallback') |
|||
// 创建定时器 当AMapUI有值的时候 清除定时器 并resolve
|
|||
let interval = setInterval(() => { |
|||
if (window.AMapUI) { |
|||
clearInterval(interval) |
|||
resolve(window.AMap) |
|||
} |
|||
}, 50) |
|||
} |
|||
} else resolve(window.AMap) |
|||
}) |
|||
} |
|||
@ -0,0 +1,35 @@ |
|||
<template> |
|||
<div class="p-map"> |
|||
<div id="mapContainer"> |
|||
<!--渲染地图的div--> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import MapLoader from '@/components/form/InputMap/amap.js' |
|||
export default { |
|||
name: 'Index', |
|||
created() { |
|||
this.loadMap() |
|||
}, |
|||
methods: { |
|||
loadMap() { |
|||
const _this = this |
|||
MapLoader().then(AMap => { |
|||
console.log('地图加载成功') |
|||
this.map = new AMap.Map('mapContainer', { |
|||
center: [117.000923, 36.675807], |
|||
zoom: 6 |
|||
}) |
|||
// map初始化插件 |
|||
AMap.plugin(['AMap.ToolBar'], function() { |
|||
_this.map.addControl(new AMap.ToolBar()) |
|||
}) |
|||
}, e => { |
|||
console.log('地图加载失败', e) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,253 @@ |
|||
<!--<template>--> |
|||
<!-- <div :class="b()">--> |
|||
<!-- <el-input ref="main"--> |
|||
<!-- v-model="address"--> |
|||
<!-- :size="size"--> |
|||
<!-- :clearable="disabled?false:clearable"--> |
|||
<!-- :disabled="disabled"--> |
|||
<!-- :placeholder="placeholder"--> |
|||
<!-- @clear="handleClear"--> |
|||
<!-- @focus="handleShow"--> |
|||
<!-- @click.native="handleClick"--> |
|||
<!-- />--> |
|||
|
|||
<!-- <el-dialog class="avue-dialog"--> |
|||
<!-- width="80%"--> |
|||
<!-- append-to-body--> |
|||
<!-- :title="placeholder"--> |
|||
<!-- :visible.sync="box"--> |
|||
<!-- @close="handleClose"--> |
|||
<!-- >--> |
|||
<!-- <div v-if="box"--> |
|||
<!-- :class="b('content')"--> |
|||
<!-- >--> |
|||
<!-- <el-input id="map__input"--> |
|||
<!-- v-model="formattedAddress"--> |
|||
<!-- :class="b('content-input')"--> |
|||
<!-- :size="size"--> |
|||
<!-- :readonly="disabled"--> |
|||
<!-- clearable--> |
|||
<!-- placeholder="输入关键字选取地点"--> |
|||
<!-- @clear="clear"--> |
|||
<!-- />--> |
|||
<!-- <div :class="b('content-box')">--> |
|||
<!-- <div id="map__container"--> |
|||
<!-- :class="b('content-container')"--> |
|||
<!-- tabindex="0"--> |
|||
<!-- />--> |
|||
<!-- <div id="map__result"--> |
|||
<!-- :class="b('content-result')"--> |
|||
<!-- />--> |
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
<!-- <span slot="footer"--> |
|||
<!-- class="dialog-footer"--> |
|||
<!-- >--> |
|||
<!-- <el-button v-if="!(disabled || readonly)"--> |
|||
<!-- type="primary"--> |
|||
<!-- :size="size"--> |
|||
<!-- icon="el-icon-check"--> |
|||
<!-- @click="handleSubmit"--> |
|||
<!-- >确 定</el-button>--> |
|||
<!-- </span>--> |
|||
<!-- </el-dialog>--> |
|||
<!-- </div>--> |
|||
<!--</template>--> |
|||
<!--<script>--> |
|||
<!--import packages from 'core/packages'--> |
|||
<!--import create from 'core/create'--> |
|||
<!--import props from '../../core/common/props.js'--> |
|||
<!--import event from '../../core/common/event.js'--> |
|||
<!--export default create({--> |
|||
<!-- name: 'input-map',--> |
|||
<!-- mixins: [props(), event()],--> |
|||
<!-- data() {--> |
|||
<!-- return {--> |
|||
<!-- formattedAddress: '',--> |
|||
<!-- address: '',--> |
|||
<!-- poi: {},--> |
|||
<!-- marker: null,--> |
|||
<!-- map: null,--> |
|||
<!-- box: false--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- watch: {--> |
|||
<!-- poi(val) {--> |
|||
<!-- this.formattedAddress = val.formattedAddress--> |
|||
<!-- },--> |
|||
<!-- value(val) {--> |
|||
<!-- if (this.validatenull(val)) {--> |
|||
<!-- this.poi = {}--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- text(val) {--> |
|||
<!-- if (!this.validatenull(val)) {--> |
|||
<!-- this.poi = {--> |
|||
<!-- longitude: val[0],--> |
|||
<!-- latitude: val[1],--> |
|||
<!-- formattedAddress: val[2]--> |
|||
<!-- }--> |
|||
<!-- this.address = val[2]--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- box: {--> |
|||
<!-- handler() {--> |
|||
<!-- if (this.box) {--> |
|||
<!-- this.$nextTick(() =>--> |
|||
<!-- this.init(() => {--> |
|||
<!-- if (this.longitude && this.latitude) {--> |
|||
<!-- this.addMarker(this.longitude, this.latitude)--> |
|||
<!-- this.getAddress(this.longitude, this.latitude)--> |
|||
<!-- }--> |
|||
<!-- })--> |
|||
<!-- )--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- immediate: true--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- computed: {--> |
|||
<!-- longitude() {--> |
|||
<!-- return this.text[0]--> |
|||
<!-- },--> |
|||
<!-- latitude() {--> |
|||
<!-- return this.text[1]--> |
|||
<!-- },--> |
|||
<!-- title() {--> |
|||
<!-- return (this.disabled || this.readonly) ? '查看' : '选择'--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- methods: {--> |
|||
<!-- clear() {--> |
|||
<!-- this.poi = {}--> |
|||
<!-- this.clearMarker()--> |
|||
<!-- },--> |
|||
<!-- handleSubmit() {--> |
|||
<!-- this.setVal()--> |
|||
<!-- this.box = false--> |
|||
<!-- },--> |
|||
<!-- handleClear() {--> |
|||
<!-- this.text = []--> |
|||
<!-- this.poi = {}--> |
|||
<!-- this.handleChange(this.text)--> |
|||
<!-- },--> |
|||
<!-- setVal() {--> |
|||
<!-- this.text = [this.poi.longitude, this.poi.latitude, this.poi.formattedAddress]--> |
|||
<!-- this.handleChange(this.text)--> |
|||
<!-- },--> |
|||
<!-- handleShow() {--> |
|||
<!-- this.$refs.main.blur()--> |
|||
<!-- this.box = true--> |
|||
<!-- },--> |
|||
<!-- // 新增坐标--> |
|||
<!-- addMarker(R, P) {--> |
|||
<!-- this.clearMarker()--> |
|||
<!-- this.marker = new window.AMap.Marker({--> |
|||
<!-- position: [R, P]--> |
|||
<!-- })--> |
|||
<!-- this.marker.setMap(this.map)--> |
|||
<!-- },--> |
|||
<!-- // 清空坐标--> |
|||
<!-- clearMarker() {--> |
|||
<!-- if (this.marker) {--> |
|||
<!-- this.marker.setMap(null)--> |
|||
<!-- this.marker = null--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- // 获取坐标--> |
|||
<!-- getAddress(R, P) {--> |
|||
<!-- new window.AMap.service('AMap.Geocoder', () => {--> |
|||
<!-- // 回调函数--> |
|||
<!-- let geocoder = new window.AMap.Geocoder({})--> |
|||
<!-- geocoder.getAddress([R, P], (status, result) => {--> |
|||
<!-- if (status === 'complete' && result.info === 'OK') {--> |
|||
<!-- const regeocode = result.regeocode--> |
|||
<!-- this.poi = Object.assign(regeocode, {--> |
|||
<!-- longitude: R,--> |
|||
<!-- latitude: P--> |
|||
<!-- })--> |
|||
<!-- // 自定义点标记内容--> |
|||
<!-- var markerContent = document.createElement('div')--> |
|||
|
|||
<!-- // 点标记中的图标--> |
|||
<!-- var markerImg = document.createElement('img')--> |
|||
<!-- markerImg.src =--> |
|||
<!-- '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'--> |
|||
<!-- markerContent.appendChild(markerImg)--> |
|||
|
|||
<!-- // 点标记中的文本--> |
|||
<!-- var markerSpan = document.createElement('span')--> |
|||
<!-- markerSpan.className = 'avue-input-map__marker'--> |
|||
<!-- markerSpan.innerHTML = this.poi.formattedAddress--> |
|||
<!-- markerContent.appendChild(markerSpan)--> |
|||
<!-- this.marker.setContent(markerContent) // 更新点标记内容--> |
|||
<!-- }--> |
|||
<!-- })--> |
|||
<!-- })--> |
|||
<!-- },--> |
|||
<!-- handleClose() {--> |
|||
<!-- window.poiPicker.clearSearchResults()--> |
|||
<!-- },--> |
|||
<!-- addClick() {--> |
|||
<!-- this.map.on('click', e => {--> |
|||
<!-- if (this.disabled || this.readonly) return--> |
|||
<!-- const lnglat = e.lnglat--> |
|||
<!-- const P = lnglat.P || lnglat.Q--> |
|||
<!-- const R = lnglat.R--> |
|||
<!-- this.addMarker(R, P)--> |
|||
<!-- this.getAddress(R, P)--> |
|||
<!-- })--> |
|||
<!-- },--> |
|||
<!-- init(callback) {--> |
|||
<!-- if (!window.AMap) {--> |
|||
<!-- packages.logs('Map')--> |
|||
<!-- return--> |
|||
<!-- }--> |
|||
<!-- this.map = new window.AMap.Map('map__container', Object.assign({--> |
|||
<!-- zoom: 13,--> |
|||
<!-- center: (() => {--> |
|||
<!-- if (this.longitude && this.latitude) return [this.longitude, this.latitude]--> |
|||
<!-- })()--> |
|||
<!-- }, this.params))--> |
|||
<!-- this.initPoip()--> |
|||
<!-- this.addClick()--> |
|||
<!-- callback()--> |
|||
<!-- },--> |
|||
<!-- initPoip() {--> |
|||
<!-- if (!window.AMapUI) {--> |
|||
<!-- packages.logs('MapUi')--> |
|||
<!-- return--> |
|||
<!-- }--> |
|||
<!-- window.AMapUI.loadUI(['misc/PoiPicker'], PoiPicker => {--> |
|||
<!-- var poiPicker = new PoiPicker({--> |
|||
<!-- input: 'map__input',--> |
|||
<!-- placeSearchOptions: {--> |
|||
<!-- map: this.map,--> |
|||
<!-- pageSize: 10--> |
|||
<!-- },--> |
|||
<!-- searchResultsContainer: 'map__result'--> |
|||
<!-- })--> |
|||
<!-- // 初始化poiPicker--> |
|||
<!-- this.poiPickerReady(poiPicker)--> |
|||
<!-- })--> |
|||
<!-- },--> |
|||
<!-- poiPickerReady(poiPicker) {--> |
|||
<!-- window.poiPicker = poiPicker--> |
|||
<!-- // 选取了某个POI--> |
|||
<!-- poiPicker.on('poiPicked', poiResult => {--> |
|||
<!-- this.clearMarker()--> |
|||
<!-- var source = poiResult.source,--> |
|||
<!-- poi = poiResult.item--> |
|||
<!-- this.poi = Object.assign(poi, {--> |
|||
<!-- formattedAddress: poi.name,--> |
|||
<!-- longitude: poi.location.R,--> |
|||
<!-- latitude: poi.location.P || poi.location.Q--> |
|||
<!-- })--> |
|||
<!-- if (source !== 'search') {--> |
|||
<!-- poiPicker.searchByKeyword(poi.name)--> |
|||
<!-- }--> |
|||
<!-- })--> |
|||
<!-- }--> |
|||
<!-- }--> |
|||
<!--})--> |
|||
<!--</script>--> |
|||
Loading…
Reference in new issue