vue 用百度地图实现链家找房的效果

最新推荐文章于 2022-07-21 21:03:23 发布

郭玉齐

最新推荐文章于 2022-07-21 21:03:23 发布

阅读量2.6k

点赞数 3

分类专栏：笔记

本文链接：https://blog.csdn.net/qq706352062/article/details/104836544

版权

笔记专栏收录该内容

113 篇文章 1 订阅

订阅专栏

vue 用百度地图实现链家找房的效果

效果如下：

点击其中的一个区（里面的数据是我自己造的，就几条，不多）

1.安装百度地图依赖

npm install vue-baidu-map –save

2.申请百度地图开放平台申请百度地图密钥（链接http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey）按照官网的信息提示写，申请好之后记住自己的ak（地图api示例链接http://lbsyun.baidu.com/jsdemo.htm#c1_16）

3.在项目里面的index.html里面添加以下代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/getscript? 
    v=2.0&ak=这里是你是自己的AK"></script>
    <title>test</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

4.创建一个模板，添加以下代码

<template>
  <div id="app">
    <div id="allmap"></div>
    <!-- <div v-if="show==true"  class="show">我是弹出层</div> -->
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
     
    };
  },
  methods: {},
  mounted: function() {
    this.$nextTick(() => {
      var map = new BMap.Map("allmap"); //初始化map, 绑定id=allmap
      var point = new BMap.Point(121.445, 31.213); // 初始化point, 给定一个默认x,y值
      map.centerAndZoom(point, 13); // 将point点放入map中，展示在页面中心展示，10=缩放程度
      map.enableScrollWheelZoom(); // 开启滚动鼠标滑轮

      // 如有多个point去展示，可根据后端接口传入为主
      let data = [
        { x: 121.48, y: 31.23, name: "黄浦区<br/>118套房" },
        { x: 121.43, y: 31.18, name: "徐汇区<br/>118套房" },
        { x: 121.45, y: 31.23, name: "静安区<br/>118套房" },
        { x: 121.5, y: 31.27, name: "虹口区<br/>118套房" },
        { x: 121.4, y: 31.25, name: "普陀区<br/>118套房" },
        { x: 121.48, y: 31.4, name: "宝山区<br/>118套房" },
        { x: 121.38, y: 31.12, name: "闵行区<br/>118套房" }
      ];

      data.forEach((e, i) => {
        // 创建point, 将x,y值传入
        let pointNumber = new BMap.Point(e.x, e.y);
        // 创建信息窗口对象
        // let detiail=new BMap.Point(e.x, e.y);
        // let infoWindow = new BMap.InfoWindow("World", {
        //   width: 150,     // 信息窗口宽度
        //   height: 100,     // 信息窗口高度
        //   title: e.x+","+e.y  // 信息窗口标题
        // });
        // 将data中的name加入地图中
        var label = new BMap.Label(e.name);
        label.setStyle({
          color: "black", //字体颜色
          fontSize: "13px", //字体大小
          padding: "18px 8px",
          backgroundColor: "white", //文本标注背景颜色
          borderRadius: "50px",
          border: "0",
          textAlign: "center",
          fontWeight: "bold" //字体加粗
        });
        markerFun(pointNumber, label);
      });

      function markerFun(points, label) {
        // let markers = new BMap.Marker(points);
        var myIcon = new BMap.Icon("/static/one.jpg", new BMap.Size(1, 1));
        var markers = new BMap.Marker(points, { icon: myIcon });
        map.addOverlay(markers); // 将标注添加到地图中

        markers.setLabel(label); // 将data中的name添加到地图中
        // 标注的点击事件
        label.addEventListener("click", function(event) {
          map.removeOverlay(markers);

          // map.openInfoWindow( points);//参数：窗口、点  根据点击的点出现对应的窗口
          map.centerAndZoom(points, 16);

          let ptdata = [
            { x: 121.4, y: 31.2456, name: "普陀一区<br/>102套" },
            { x: 121.4, y: 31.26, name: "普陀二区<br/>103套" },
            { x: 121.4, y: 31.2645, name: "普陀三区<br/>120套" },
            {x: 121.43, y: 31.18, name: "徐汇一区<br/>120套"},
            {x: 121.43, y: 31.19, name: "徐汇二区<br/>120套"},
          ];
          ptdata.forEach((e, i) => {
            // 创建point, 将x,y值传入
            let ptpointNumber = new BMap.Point(e.x, e.y);

            // 将data中的name加入地图中
            var ptlabel = new BMap.Label(e.name);
            ptlabel.setStyle({
              color: "black", //字体颜色
              fontSize: "13px", //字体大小
              padding: "15px 8px",
              backgroundColor: "white", //文本标注背景颜色
              borderRadius: "50px",
              border: "0",
              textAlign: "center",
              fontWeight: "bold" //字体加粗
            });
            ptmarkerFun(ptpointNumber, ptlabel);
          });
          function ptmarkerFun(ptpoints, ptlabel) {
            var ptmyIcon = new BMap.Icon(
              "/static/one.jpg",
              new BMap.Size(1, 1)
            );
            var ptmarkers = new BMap.Marker(ptpoints, { icon: ptmyIcon });
            // let ptmarkers = new BMap.Marker(ptpoints);
            map.addOverlay(ptmarkers); // 将标注添加到地图中
            ptmarkers.setLabel(ptlabel); // 将data中的name添加到地图中
           
          }
        });
      }

      // 获取当前地理位置
      // var geolocation = new BMap.Geolocation();
      // geolocation.getCurrentPosition(function (r) {
      //   if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      //     var mk = new BMap.Marker(r.point);
      //     map.addOverlay(mk);
      //     map.panTo(r.point);
      //     // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
      //   } else {
      //     // alert('failed' + this.getStatus());
      //   }
      // });
    });
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#allmap {
  height:800px;
  overflow: hidden;
}
.show{
  border: 1px solid black;
  height: 200px;
  position: absolute;
  bottom: 0;
  background-color: white;
  left: 0;
  width: 100%;
  padding: 10px;
}
</style>

5.结束

郭玉齐

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
vue 用百度地图实现链家找房的效果

vue 用百度地图实现链家找房的效果效果如下：点击其中的一个区（里面的数据是我自己造的，就几条，不多）1.安装百度地图依赖npm install vue-baidu-map –save2.申请百度地图开放平台申请百度地图密钥（链接http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey）按照官网的信息提...
复制链接

扫一扫