高德地图api+vue 实现锚点、信息窗体

最新推荐文章于 2024-03-15 09:20:34 发布

萌新之路

最新推荐文章于 2024-03-15 09:20:34 发布

阅读量1.2k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44162778/article/details/122082221

版权

实现功能：
1、高德地图api+vue 实现锚点、信息窗体
2、点击信息窗体调起高德地图

页面：

<template>
  <div class="hospitalNavigation">
<!--    地图-->
    <div id="mapContainer"></div>
  </div>
</template>

<script>
export default {
   
  name: "hospitalNavigation",
  data(){
   
    return{
   
      show:false,
      hospItem:[],
      marker:null,
    }
  },
  mounted() {
   
    this.getMap()
  },
  methods:{
   
    getMap(){
   
      // 获取地理编码
      let that = this;
      console.log("医院数据",that.hospItem)
      console.log(that.hospItem.Address)
      AMap.plugin('AMap.Geocoder', function() {
   
        let geocoder = new AMap.Geocoder({
   
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: '全国'
        })
        geocoder.getLocation(that.hospItem.Address, function(status, result) {
   
          if (status === 'complete' && result.info === 'OK') {
   
            // result中对应详细地理坐标信息<