高德地圖/百度地圖 api 根據select 選擇地點 進行位置的顯示;
阿新 • • 發佈:2021-11-29
需求:根據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 })
}
});