高德地图/百度地图 api 根据select 选择地点进行位置的显示；

偏执的太偏执、 2024-04-24 20:59 82阅读 0赞

需求：根据select 选择器选择城市地名切换地图位置变化

预期效果：

![ecc681aa28844facab638726b07a136f.gif][]

高德地图API：

思路：根据高德地图api（[概述-地图 JS API | 高德地图API][-_ JS API _ _API]）官方实例进行修改

需要获取城市地点的adcode值和城市地点的名称通过AMap.Geocoder()进行获取相关信息，将adcode值和城市地点的名称通过.setCity 和

修改代码：

<select name="" id="courtNameSelect" class="selectClass" style="background-position-x: 150px!important;">
                  <option value="哈尔滨冰雪大世界">哈尔滨冰雪大世界</option>
                  <option value="大连星海广场">大连星海广场</option>
                  <option value="沈阳中街">沈阳中街</option>
                </select>

$(function () {
      //地图加载
      var map = new AMap.Map("container", {
        resizeEnable: true,
        showMarker: true,
        enableHighAccuracy: true,
        showButton: true,
        panToLocation: true,
      });
      var placeSearch = new AMap.PlaceSearch({
        map: map
      });  //构造地点查询类
      $('#courtNameSelect').change(function () {
        var myValue;
        myValue = $(this).val()
        AMap.plugin('AMap.Geocoder', function () {
          var geocoder = new AMap.Geocoder();
          geocoder.getLocation(myValue, function (status, result) {
            if (result.info === 'OK') {
              const adcodeNum = result.geocodes[0].adcode
              select(adcodeNum, myValue);
            }
          });
        });
      })
      function select (adcodeNum, myValue) {
        placeSearch.setCity(adcodeNum);
        placeSearch.search(myValue);  //关键字查询查询
      }
      map.plugin(["AMap.ToolBar"], function () {
        map.addControl(new AMap.ToolBar());
      });
      if (location.href.indexOf('&guide=1') !== -1) {
        map.setStatus({ scrollWheel: false })
      }
    });

#### 百度地图API： ####

思路：根据高德地图api（[地图JS API示例 | 百度地图开放平台][JS API_ _]）官方实例进行修改

代码

$(function () {
      console.log($("#courtNameSelect").val())
      // 百度地图API功能
      function G (id) {
        return document.getElementById(id);
      }
      var map = new BMap.Map("l-map");
      const centerPlace = "北京"
      map.centerAndZoom(centerPlace, 12);
      const mrPlace = $("#courtNameSelect").val()
      function myFun () {
        var pp = mrPlace;
        map.centerAndZoom(pp, 18);
        map.addOverlay(new BMap.Marker(pp));
      }
      var local = new BMap.LocalSearch(map, {
        onSearchComplete: myFun
      });
      local.search(mrPlace);
      $('#courtNameSelect').change(function () {
        var myValue;
        myValue = $(this).val()
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun () {
          var pp = myValue;
          console.log(pp)
          map.centerAndZoom(pp, 18);
          map.addOverlay(new BMap.Marker(pp));
        }
        var local = new BMap.LocalSearch(map, {
          onSearchComplete: myFun
        });
        local.search(myValue);
      })
    });

#### 高德地图结合zTree.js多级联动效果实现 ####

引入zTree.js相关js文件以及css文件

$(function () {
    var zNodes = [
            {id: 1, pId: 0, name: "父1 - 展开", open: true},
            {id: 11, pId: 1, name: "父11 - 折叠"},
            {id: 111, pId: 11, name: "叶子节点节点节点111"},
            {id: 113, pId: 11, name: "叶子节点节点节点113"},
            {id: 1131, pId: 113, name: "叶子节点节点节点1131"},
            {id: 1132, pId: 113, name: "叶子节点节点节点1132"},
            {id: 1133, pId: 113, name: "叶子节点节点节点1133"},
            {id: 114, pId: 11, name: "叶子节点节点节点114"},
            {id: 12, pId: 1, name: "父12 - 折叠"},
            {id: 121, pId: 12, name: "叶子节点节点节点121"},
            ...
        ];
      //地图加载
      var map = new AMap.Map("container", {
        resizeEnable: true,
        showMarker: true,
        enableHighAccuracy: true,
        showButton: true,
        panToLocation: true,
      });
      var placeSearch = new AMap.PlaceSearch({
        map: map
      });  //构造地点查询类
      $('.auditdh').click(function () {
        var mrPlace = $("#select2").find('option:selected').text()
        AMap.plugin('AMap.Geocoder', function () {
          var geocoder = new AMap.Geocoder();
          geocoder.getLocation(mrPlace, function (status, result) {
            if (result.info === 'OK') {
              const adcodeNum = result.geocodes[0].adcode
              select(adcodeNum, mrPlace);
            }
          });
        });
      })
      $("#select2").selectZTree({ data: zNodes })
        .on("change", function (e, data) {
          const address = data.address
          $('#placeAddress').html(address)
          var myValue;
          myValue = data.name
          AMap.plugin('AMap.Geocoder', function () {
            var geocoder = new AMap.Geocoder();
            geocoder.getLocation(myValue, function (status, result) {
              if (result.info === 'OK') {
                const adcodeNum = result.geocodes[0].adcode
                select(adcodeNum, myValue);
              }
            });
          });
        });
      function select (adcodeNum, myValue) {
        placeSearch.setCity(adcodeNum);
        placeSearch.search(myValue);  //关键字查询查询
      }
      map.plugin(["AMap.ToolBar"], function () {
        map.addControl(new AMap.ToolBar());
      });
      if (location.href.indexOf('&guide=1') !== -1) {
        map.setStatus({ scrollWheel: false })
      }
    });

[ecc681aa28844facab638726b07a136f.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/6708b24045a7474c940bc45610afb7d7.gif
[-_ JS API _ _API]: https://lbs.amap.com/api/javascript-api/summary/
[JS API_ _]: https://lbsyun.baidu.com/jsdemo.htm#webgl0_1