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