vue.js 高德地图 demo

        {{position|json}}                Go!        [br]                选择坐标                        Go!                [br]                取消                确定    -->        '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            }        })

关键字：vue.js, 高德地图, vue, JSON

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！