高德地图php demo,vue.js 高德地图 demo

{{position|json}}

Go!

选择坐标

Go!

取消

确定

'use strict';

Vue.component('gdMap', {

props: ['position'],

template: '

replace: true,

ready() {

this.map = new AMap.Map(this.$el, {

resizeEnable: true,

zoom: 12,

})

var self = this

if (this.position.lng && this.position.lat) {

var center = [this.position.lng, this.position.lat]

this.map.setCenter(center)

this.marker = new AMap.Marker({ map: self.map })

this.marker.setPosition(center)

}

this.map.on('click', function (e) {

self.$dispatch('map-click', e)

if (!self.marker) {

self.marker = new AMap.Marker({ map: self.map })

}

self.marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()])

})

},

events: {

'setCenter'(center) {

if (!this.map) return

this.map.setCenter(center)

},

},

})

new Vue({

el: '#app',

data: function () {

return {

q: null,

position: {}

}

},

methods: {

search(q) {

var self = this

AMap.service(["AMap.PlaceSearch"], function () {

var placeSearch = new AMap.PlaceSearch({ //构造地点查询类

pageSize: 1,

pageIndex: 1,

//city: "010", //城市

//map: self.map,

//panel: "panel"

})

//关键字查询

placeSearch.search(q, function (status, result) {

//TODO : 按照自己需求处理查询结果

var poiList = result.poiList

if (poiList.count > 0) {

var p = poiList.pois[0]

self.$broadcast('setCenter', [p.location.lng, p.location.lat])

}

})

})

},

map_click (e) {

this.$set('position.lat', e.lnglat.getLat())

this.$set('position.lng', e.lnglat.getLng())

}

},

components: {

modal: VueStrap.modal

}

})