easyui一个页面两个搜索框对应两张表_基于高德地图JavaScript API 设计开发成的一个单页面应用...

获取高德地图key

进入高德地图开放平台，注册高德地图账号、登陆、认证为开发者，然后进入个人控制台、创建新应用，在创建的应用上点击“添加key”按钮。

这里我们需要用到的高德地图的JavaScript API ，所以点击添加按钮后我们选择Web 服务的JS API如图

底图切换与图层显示

功能实现

利用高德地图提供的JavaScript API 加载底图，同时增加一个新的地图控件来把原有的标准底图切换到卫星影像底图，方便了用户根据自己的实际需要能够加载恰当的背景地图，当用户点击对应的卫星图层时，底图会切换为卫星影像图，再点击图标，底图会切换为原来的标准底图。同时加入图层显示插件，可以在任一底图之上显示路况路网图层。

• 关键代码

// 定义一个变量来引入卫星底图API var satellite = new AMap.TileLayer.Satellite({ map: map, zIndex: 2, zooms: [3, 18] }) // 点击按钮实现切换卫星底图，再点击就关闭卫星底图。 document.getElementById('btn5').onclick = function() { if (this.innerText === '卫星') { this.style.backgroundColor = "skyblue" this.innerText = '地图' satellite.show() } else if (this.innerText === '地图') { this.style.backgroundColor = "white" this.innerText = '卫星' satellite.hide() } 

• 运行结果

设计方法

判断当用户点击按钮，按钮名称为卫星时，底图切换为卫星图层也就是卫星图层变量satellite调用show()方法显示，同时按钮名称变为地图，当按钮名称为地图时，鼠标点击，底图会切换为标准底图，这是satellite调用hide()方法隐藏。而在后续更是可以通过加载插件AMap.MapType来增加图层显示功能，无论是在标准底图和卫星底图为当前地图都可以在之上显示路况图层或者路网图层。两者也可以同时显示，高德地图已经把这个功能封装进AMap.MapType插件了，当我们需要的时候引用此插件即可。

天气查询

功能实现

点击按钮获得当地当前的天气情况以及未来四天的天气预报显示在界面右上角部分，让用户比较简单的获取想要的天气咨询。

关键代码

var city // 定义一个变量来接收当前地图中心点所在城市 map.getCity(function (data) { city = data.city })AMap.plugin('AMap.Weather', function() { var weather = new AMap.Weather() //根据上面获取到的当前城市名称city来搜索当前天气 weather.getLive(city, function(err, data) { if (!err) { var str = [] str.push('

实时天气' + '

') str.push('

城市/区：' + data.city + '

') str.push('

天气：' + data.weather + '

') str.push('

温度：' + data.temperature + '℃

') str.push('

风向：' + data.windDirection + '

') str.push('

风力：' + data.windPower + ' 级

') str.push('

空气湿度：' + data.humidity + '

') str.push('

发布时间：' + data.reportTime + '

') marker = new AMap.Marker({ map: map, position: map.getCenter() }) var infoWin = new AMap.InfoWindow({ content: '

' + str.join('') + '

• 运行结果

设计方法

判断当用户点击按钮，按钮名称为天气查询时，使用变量weather来引用API天气插件AMap.Weather然后调用其中的getLive方法，此方法需要传入一个地点参数作为查询地点才能得到目标地点结果，所以我在运行这个代码之前先定义一个city变量，为这个变量赋值，值为map.getCity方法得到的当前城市地点名称。 传入city函数调用方法会得到当前地点的天气咨询，但是都是数据类型，我们需要把这些数据图像化呈现出来，所以之后代码就是把得到的查询结果放置在相应的中文结果名称上，再以可视化显示到界面上。这样就完成了天气查询功能了。 另外，为了优化用户体验，可以添加一个普通的点标记来记录当前地图中心点并把得到的结果显示在此标记上面，这样我们再后续移动页面的时候不会对结果造成遮挡。 此外，天气查询功能还增加了查询未来4天天气预报的功能，也是通过变量weather来调用getForecast方法来获取结果并显示在界面上，原理同上。

距离测量

功能实现

点击按钮实现进入距离测量功能，鼠标左键点击起始点，确定位置留下一个记号N，再点击下一个点得到两个点之前的直线物理距离，单位为公里(km)，此时距离测量功能还没结束，还可以点击下一个地点得到三个点之间的直线距离总和，以此类推，可以供用户测量多个点的总和长度和每两个点之间的长度。按右键结束当前测量。

关键代码

var ruler // 定义一个变量来接收距离测量插件 map.plugin(["AMap.RangingTool"], function() { ruler = new AMap.RangingTool(map) }) document.getElementById('btn3').onclick = function() { console.dir(this) if (this.innerText === '距离测量') { this.style.backgroundColor = "skyblue" this.innerText = '关闭测量' ruler.turnOn() } else if (this.innerText === '关闭测量') { this.style.backgroundColor = "white" this.innerText = '距离测量' ruler.turnOff() } }复制代码

• 运行结果

设计方法

判断当用户点击按钮，按钮名称为距离测量时，通过定义新的变量ruler来引入API距离测量插件AMap.RangingTool(map)，来调用其封装的turnOn方法进入测量模式。 这里需要注意的是跟底图切换功能不同，这里引入API时需要传入当前地图对象map，因为该功能时需要对整个地图对象map进行一个操作调用方法实现的功能，进入测量模式后点击多个地方测量各个地点的距离和总和距离。通过用户点击鼠标右键来结束当前这一次的距离测量，但是需要注意的是此时还没有退出距离测量模式，这时再点击鼠标左键的话会进行新的距离测量方法。 所以为了提高用户体验，在原按钮上也应该增加点击按钮彻底退出距离测量模式的功能，此方法原理同底图切换功能，这里不再赘述。

输入提示与POI搜索

功能实现

用户在地点查询搜索框中输入地点名称时，搜索框会自动根据用户当前输入的地点自动生成关键地点提示，并以列表的形式展现在输入框下面，可以让用户不必输入完整的地点就可以之间看到可能出现匹配的目的地地点。 当用户点击出现的匹配列表中的某一个具体地点时，则代表用户需要搜索这个地点的所在位置和相关信息，界面应该跳转到用户输入的地点，并且如果通过POI搜索得到多个结果，界面应该缩小到可以同时显示多个相关地点的程度来让用户更加直观的看到搜索结果。 如果POI搜索结果出现多个匹配的地点，需要在搜索框下面呈现这些匹配的地点并以列表图像化的形式出现在界面上，当用户点击某个匹配的地点的时候，界面应该跳到用户点击地点的所在位置并根据目标所占面积放大或缩小到适当的程度。

• 关键代码

// 定义变量来接收指定搜索框用户输入的地点，下面的变量tipinput是指页面元素输入框的id值，以此来接收用户在特点输入框输入的内容。 var autoOptions = { input: "tipinput" } var auto = new AMap.Autocomplete(autoOptions) // ===========================================================数据展示 var placeSearch = new AMap.PlaceSearch({ pageSize: 5, // 单页显示结果总条数 pageIndex: 1, // 页码 panel: "panel