zoukankan      html  css  js  c++  java
  • 高德 定位到所在城市

     
    <template>
      <div>
        <div id="container" style=" 1200px; height: 500px"></div>
      </div>
    </template>

    <script>
    import AMapLoader from "@amap/amap-jsapi-loader";
    let map = {};
    export default {
      data() {
        return {
        };
      },
      mounted() {
        this.initMap();
      },
      methods: {
        initMap() {
          AMapLoader.load({
            key: "e7e915c3e7eb0905762eddb068becb54",
            plugin: [
              "AMap.Scale",
              "AMap.OverView",
              "AMap.ToolBar",
              "AMap.MapType",
              "AMap.MassMarks",
            ],
            version: "2.0",
          })
            .then((AMap) => {
              map = new AMap.Map("container", {
                zoom: 4,
                // center: [102.342785, 35.312316],
                showIndoorMap: false,
                viewMode: "3D",
              });
              AMap.plugin("AMap.CitySearch", function () {
                var citySearch = new AMap.CitySearch();
                citySearch.getLocalCity(function (status, result) {
                  if (status === "complete" && result.info === "OK") {
                    // 查询成功,result即为当前所在城市信息
                    var cityinfo = result.city; //当前所在城市
                    var citybounds = result.bounds; //为了定位到所在城市
                    //地图显示当前城市
                    map.setBounds(citybounds);
                  }
                });
              });
            })
            .catch((e) => {
              console.log(e);
            });
        },
      },
    };
    </script>

    <style>
    </style>
  • 相关阅读:
    python_控制台输出带颜色的文字方法
    模拟数据库作业
    js笔记
    CSS 笔记
    html 笔记
    必备技能-Git 使用规范流程
    python 闭包
    30个python编程技巧!
    python 面向对象
    python 线程
  • 原文地址:https://www.cnblogs.com/lh1998/p/13859061.html
Copyright © 2011-2022 走看看