简单使用高德地图

  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key='key自己申请'&plugin=AMap.MouseTool,AMap.Geolocation,AMap.ControlBar,Map3D,AMap.DistrictSearch,AMap.RangingTool,AMap.PolyEditor"></script>
引入好高德地图后

在  template 添加标签   <div id="mapRailContainer"></div>
在 mounted 生命周期调用写好的 方法   this.addMarker()
 在 methods 里面 

 addMarker () {

        let marker = new window.AMap.Marker({

          icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',

          position: [114.084088, 22.547388],

          offset: new window.AMap.Pixel(-13, -30)

        })

        marker.on('click', () => {

          let info = []

          info.push(`<div style="font-size: 12px; padding:0 0 0 4px;"><b>老街坊江味龙虾馆(南山店)</b>`)

          info.push(`地址 : 桂庙路44号(南山大道与桂庙路交汇处，仰天福楼下)`)

          info.push(`电话 :[phone]`)

          info.push('</div>')

          let infoWindow = new window.AMap.InfoWindow({

            content: info.join('<br/>'),

            offset: new window.AMap.Pixel(0, -30)

          })

          infoWindow.open(this.map, [114.084088, 22.547388])

 

        //   this.clickMarker(item)

        })

        marker.setMap(this.map)

    },

 

效果