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>
  • 相关阅读:
    kioptrix-1
    4.4 CSRF
    upload-labs 练习笔记
    4.3 XSS
    外国人是怎样读编程书的呢?
    如何快速学习新语言
    Go开发环境配置
    Golang Package I
    MVC模式小结
    Flask基础知识
  • 原文地址:https://www.cnblogs.com/lh1998/p/13859061.html
Copyright © 2011-2022 走看看