高德地圖/百度地圖 api 根據select 選擇地點 進行位置的顯示；

需求：根據select 選擇器選擇城市地名切換地圖位置變化

預期效果：

高德地圖API：

思路：根據高德地圖api（https://lbs.amap.com/api/javascript-api/summary/）官方實例進行修改

需要獲取城市地點的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（https://lbsyun.baidu.com/jsdemo.htm#webgl0_1）官方實例進行修改

代碼

<select name="" id="courtNameSelect" class="selectClass" style="background-position-x: 150px!important;">
              <option value="哈爾濱冰雪大世界">哈爾濱冰雪大世界</option>
              <option value="大連星海廣場">大連星海廣場</option>
              <option value="沈陽中街">沈陽中街</option>
            </select>

$(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文件

  <link rel="stylesheet" href="css/index/zTreeStyle.css" type="text/css">
  <link rel="stylesheet" href="css/index/jquery.select.zTree.v1.5.css" type="text/css">
  <script type="text/javascript" src="js/common/jquery.ztree.core.js"></script>
  <script type="text/javascript" src="js/common/jquery.ztree.exhide.js"></script>
  <script type="text/javascript" src="js/common/jquery.select.zTree.v1.5.min.js"></script>

<select id="select2" title="選擇"> </select>

$(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 })
  }
});