高德地图与vue的使用

Mr.wang

vue

发布于：2019年6月26日

次浏览

高德地图在vue中的使用，data绑定高德地图

首先介绍一下vue与高德之间的联系

vue与数据息息相关，而且，vue的数据使用是通过this来调用

也是把数据挂载到了vm实例身上，调用时，使用this调用vm实例上挂载的数据及其方便，所以在vue的使用时我们偶尔也会碰到this指向不明，指向的不是vm实例导致数据输出undefined

高德的API使用简单，我们可以思考：与vue的this的挂载使用

初始化地图

调用地图接口-同步

<script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=你个人的key，下面有高德与百度的链接"
    ></script>

高德地图百度地图

调用接口-异步

window.onLoad  = function(){
      var map = new AMap.Map('container');
}
var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onLoad';
var jsapi = doc.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);

两者各有优缺，看场景使用

官方的使用

var map = new AMap.Map('container', {
       zoom:11,//级别
       center: [116.397428, 39.90923],//中心点坐标
       viewMode:'3D'//使用3D视图
});

与vue结合使用

data(){
      return {
          map:null
   }
}

this.map = new AMap.Map("hotelMap", {
        zoom: 11, //级别
        center: [116.397428, 39.90923], //中心点坐标
        viewMode: "3D" //使用3D视图
  });

两者的区别只是this与var的不同，但是实际上var 是定义一个全局的map变量让我们使用，我们在哪个函数都能使用map 因为他是全局的变量

this却是让map这个变量挂载到vm实例身上，所以你需要在data里初始化map

你的地图需要描点与打开信息窗体时

data() {
    return {
       MapData:[],  // 后台数据初始化
      map: null,  //地图初始化
      infoWindow  // 信息窗体
      markers: null, // 点的数据
      center: [118.796623, 32.059352]  // 地图中心点
    };
  },

在vue调用地图时最好使用定时器调用，因为地图加载需要时间

1
2
3

setTimeout(() => {
     this.setMapInfo();
 }, 3000);

生成多个描点需要后台返回经纬度信息，下面使用的数据已经是后台返回的带有经纬度信息location：{ longitude：经度，latitude：纬度}

methods:{
    setMapInfo() {
      const {location} = this.MapData[3]  //数据的第三条数据当地图中心
      //设置地图中心点
      this.center = [location.longitude,location.latitude]
      this.map = new AMap.Map("hotelMap", {   //初始化地图
        zoom: 10, //级别
        center: this.center, //中心点坐标
        viewMode: "3D" //使用3D视图
      });
        //数据的循环  让点循环生成
      this.MapData.forEach(v => {
        //生成多个坐标点
        this.setMarker(v.area, [v.location.longitude, v.location.latitude], v);  //第一个v.area  是点的标识，第二个是一个经纬度数据，第三个是v 后台的其他信息  ==》可以直接写参数v  其他的在setMarker
      });
    },
    //添加点标记
    setMarker(markers, position, data) {
        //点的设置
      this.markers = new AMap.Marker({
          //点的内容，也是你在地图中显示的点的样式 你可以是一张图片 可以是圆，多边形
        content: `<div style="width:20px;height:28px;text-align:center;" class="el-icon-location"></div>`,
        //点的经纬度  也是位置
        position: position,
          ///点也有偏移
        offset: new AMap.Pixel(-17, -42), // 相对于基点的偏移位置
         //地图一定要绑定在你想使用的地图上 也就是说在一个页面不一定只有一个地图
        map: this.map //把点标记绑在前面初始化的 map_ 上，否则不显示
      });
        //注册点的触发事件，触发信息窗体
      this.markers.on("mousemove", () => {
          //定义信息窗体的div内容
        this.content =  
    `<div><img src="${data.photos}" style="width:100px; height:50px;margin:0 auto"> 
    <div><b style="color:#666">${data.name}</b>`
        //重新设置信息窗体
        this.infoWindow = new AMap.InfoWindow({
            //信息窗体相对于基点=》也就是经纬度的点 偏移的xy轴量
          offset: new AMap.Pixel(-5, -50),
          content: this.content //传入 dom 对象，或者 html 字符串
        });
          //设置信息窗体需要打开 ，参数是  这个地图this.map  和  position  打开的位置
        this.infoWindow.open(this.map, position);
      });
    },
}

实际效果

当你想要在地图外响应地图时

<template>
     <div class="traffic">
          <ul>
        	 <li v-for="(item,index) in sceneryMapdata" :key="index" style="cursor:pointer;"
				@mousemove="choose(item)">
            	 <span>{{item.name}}</span>
				<span>{{item.biz_ext.rating}}公里</span>
			</li>     
         </ul>
    </div>
</template>

data() {
    return {
      //地图的标签
      activeName:"first",
      // 地图的数据
      sceneryMapdata:null,
       //地图加载时间
      loading:true,
      //地图窗体信息
      content: "高级酒店",
      map: null,
      markers: null,
      infoWindow: null,
      center: [118.796623, 32.059352]
    };
  },
methods: {
    //触发地图的点
    choose(data){
       let temp = data.location.split(",");
        temp = [temp[0]-0,temp[1]-0]
        this.content = data.name
         this.infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(-5, -50),
          content: this.content //传入 dom 对象，或者 html 字符串
        });
       this.infoWindow.open(this.map, temp);
    
    },
    //添加点标记
    setMarker(markers, position, data) {
      this.markers = new AMap.Marker({
        content: `<div style="width:20px;height:28px;text-align:center;" class="el-icon-location"></div>`,
        position: position,
        offset: new AMap.Pixel(-17, -42), // 相对于基点的偏移位置
        map: this.map //把点标记绑在前面初始化的 map_ 上，否则不显示
      });
       AMap.event.addListener(this.markers,"mousemove", ()=>{
        this.content = data.name;
        this.infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(-5, -50),
          content: this.content //传入 dom 对象，或者 html 字符串
        });
        this.infoWindow.open(this.map, position);
      });
    },
    setMapInfo() {
      const {location} = this.sceneryMapdata[3]
      //重新设置地图中心点
      const temp = location.split(",");
      this.center = [temp[0]-0,temp[1]-0]
      this.map = new AMap.Map("detailMap", {
        zoom: 14, //级别
        center: this.center, //中心点坐标
        viewMode: "3D" //使用3D视图
      });
      this.sceneryMapdata.forEach(v => {
        //生成多个坐标点
        let str = v.location.split(",");
        this.setMarker(v.name, [str[0]-0,str[1]-0], v);
      });
    },
    //请求数据
    getMapdata(){
      this.$axios({
      url:`https://restapi.amap.com/v3/place/text`,
      params:{
        keyword:'',
        location:"118.732841,32.077242",
        city:"南京市",
        types:"风景名胜",
        output:'json',
        page:1,
        offset:10,
        key:'key私人定制'  //=》 这个key是一个web服务 当你创建key可以选择
      }
    }).then(res=>{
      this.sceneryMapdata = res.data.pois
    })
    }
  },
 mounted() {
     setTimeout(() => {
      this.setMapInfo();
    }, 3000);
    //请求数据
    this.getMapdata()
  }
};

本页文档最后更新于：2021年4月13日

javascript

vue

node基础服务器

node服务器的快捷搭建搭建一个nodejs服务器nodejs搭建服务器，需要4步：1.引入http模块1var http = require('http');//...

js逻辑执行

js执行上下文时，变量提升,作用域全局污染所谓全局变量污染：定义多个全局变量，函数，对象挂载在window上，如果重复使用则造成变量冲突如果定义一个全局变量则会在window上挂...