yunsu/ys_vue/src/views/map/map.vue

<template>
	<div id="container"></div> 
</template>

<script>
    import Vue from 'vue';

	export default {
		data() {
			return {
				
			}
		},
		methods: {
            
        },
        mounted() {
            let height = window.innerHeight;
            height = height - 100;
            this.$el.style.height = height + "px";

            var map = new AMap.Map('container', {
                resizeEnable: true,   
                zoom: 5
            });
            map.clearMap();  
            var markers = [] , 
                infoWindow , 
                data=[{"fLong":'112.00003','fLati':'30.2345'},{"fLong":'115.00003','fLati':'18.2345'},{"fLong":'114.00003','fLati':'38.2345'},{"fLong":'116.00003','fLati':'38.2345'}];

            var marker;
            for(var i in data){
                var jfong=[ data[i].fLong , data[i].fLati ];
				marker = new AMap.Marker({
                    position: jfong,
                    zIndex: 101,
                    map:map
				});	
                marker.setMap(map);	
                marker.orderON=data[i].orderON;
                marker.tranOFID=data[i].tranOFID;
                marker.fhadd=data[i].fhadd;
                marker.sAdd=data[i].sAdd;
                marker.status=data[i].status;			
			    marker.on('click', function(data){
                    var MyComponent = Vue.extend({
                        template: "<div class='window'>" +
                            "<div class='info-top'><div>方恒假日酒店<span>价格:318</span></div><i class='el-icon-close' @click='closeInfoWindow()'></i></div>" +
                            "<div class='info-middle'>" + 
                                "地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里<br>" +
                                "电话：010-64733333<br>" +
                                "经度：" + data.lnglat.lng + "<br>" +
                                "纬度：" + data.lnglat.lat + "<br>" +
                                "<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>" +
                            "</div>" +
                        "</div>",
                        methods:{
                            closeInfoWindow:function() {
                                map.clearInfoWindow();
                            }
                        }
                    });
                    var component= new MyComponent().$mount();
                    infoWindow.setContent(component.$el);
                    infoWindow.open(map, data.lnglat);
                });
            }

            infoWindow = new AMap.InfoWindow({
                isCustom:	true,
                draggable: true,  //是否可拖动
                showShadow: true,
                autoMove: true,
                offset: new AMap.Pixel(0, -31),
                content:""
            });

            marker.setMap(map);
        }
	}

</script>

<style scoped lang="scss">
    #container {
        width: 100%; 
        margin-top: 10px;
    }  
</style>