基于JS制作一个简单的网页版地图
目录
- 前言
- 一、申请地图的AK密钥
- 二、主要代码分析
- 三、全部代码
- 四、结果展示
前言
以前做了一个安卓版的地图应用，现在突然想做一个简单的网页版地图。这个简单的网页版地图能根据城市名进行位置查询（有个城市列表的小控件，支持城市列表选择），还能根据经纬度进行位置查询。当你进行城市搜索时，或者经纬度查询城市时，该小控件也能自由地切换到目标城市。
一、申请地图的AK密钥
1、首先找到一个地图开放平台，这里以百度地图开放平台为例，步骤如下：进入百度地图开放平台，拉到最底下，进行登录注册，然后进入应用管理，点击创建应用。
2、“应用名称”可以自己随意编辑，既然是百度地图，建议大家就写“地图”，应用类型因为做的是网页版的地图，所以选择浏览器端，启用服务默认就行
3、“IP白名单”处建议大家就填*，方便在不同的电脑上操作（百度地图官方不推荐）
4、点击“提交”，提交之后会出现如下网页，访问应用（AK）处会出现一串数字字母代码。这个就是我们要的AK密匙了，把它再粘贴到自己创建的网页版地图代码中去就好了
二、主要代码分析
1、设置鼠标滚轮缩放，可以自由地缩小或者扩大自己的地图
map.enableScrollWheelZoom(true);
2、根据城市名称进行位置查询
function theLocation1() {
var city = document.getElementById("cityName").value;
if (city != "") {
// 用城市名设置地图中心点
map.centerAndZoom(city, 11);
}
}
3、根据经纬度进行位置查询
function theLocation2() {
if (document.getElementById("lng").value != "" && document.getElementById("lat").value != "") {
map.clearOverlays();
var new_point = new BMapGL.Point(document.getElementById("lng").value, document.getElementById("lat").value);
// 创建标注
var marker = new BMapGL.Marker(new_point);
// 将标注添加到地图中
map.addOverlay(marker);
map.panTo(new_point);
}
}
4、创建城市选择控件
var cityControl = new BMapGL.CityListControl({
// 控件的停靠位置（可选，默认左上角）
anchor: BMAP_ANCHOR_TOP_LEFT,
// 控件基于停靠位置的偏移量（可选）
offset: new BMapGL.Size(10, 5)
});
// 将控件添加到地图上
map.addControl(cityControl);
三、全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></script>
<title>我的地图</title>
<style>
html, body, #allmap {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#result {
padding: 7px 10px;
position: fixed;
top: 5px;
right: 0;
left: 0;
margin: auto;
width: fit-content;
background: #fff;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
border-radius: 7px;
z-index: 99;
}
#result input {
width: 100px;
margin-right: 10px;
height: 20px;
border: 1px solid rgba(27, 142, 236, 0.5);
border-radius: 5px;
}
#result button {
margin-right: 15px;
border: 1px solid rgba(27, 142, 236, 0.5);
border-radius: 5px;
background: rgba(27, 142, 236, 0.5);
color: #fff
}
</style>
</head>
<body>
<div id='allmap'></div>
<div id='result'>
城市名: <input id="cityName" type="text"/>
<button onclick="theLocation1()"/>
查询</button>
经度: <input id="lng" type="text"/>
纬度: <input id="lat" type="text"/>
<button onclick="theLocation2()"/>
查询</button>
</div>
<script>
// 百度地图API功能
var map = new BMapGL.Map("allmap");
var point = new BMapGL.Point(116.331398, 39.897445);
map.centerAndZoom(point, 11);
//设置鼠标滚轮缩放
map.enableScrollWheelZoom(true);
//根据城市名称进行地图查询
function theLocation1() {
var city = document.getElementById("cityName").value;
if (city != "") {
// 用城市名设置地图中心点
map.centerAndZoom(city, 11);
}
}
// 根据经纬度进行地图查询
function theLocation2() {
if (document.getElementById("lng").value != "" && document.getElementById("lat").value != "") {
map.clearOverlays();
var new_point = new BMapGL.Point(document.getElementById("lng").value, document.getElementById("lat").value);
// 创建标注
var marker = new BMapGL.Marker(new_point);
// 将标注添加到地图中
map.addOverlay(marker);
map.panTo(new_point);
}
}
// 创建城市选择控件
var cityControl = new BMapGL.CityListControl({
// 控件的停靠位置（可选，默认左上角）
anchor: BMAP_ANCHOR_TOP_LEFT,
// 控件基于停靠位置的偏移量（可选）
offset: new BMapGL.Size(10, 5)
});
// 将控件添加到地图上
map.addControl(cityControl);
</script>
</body>
</html>
四、结果展示
1、主界面包含城市名查询、经纬度查询以及下拉选择城市等
2、根据城市查询位置，可以看见城市选择控件也发生改变
3、根据经纬度查询位置 ，随便输入一个经纬度坐标，可以看见城市选择控件也发生改变
4、下拉城市选择
到此这篇关于基于JS制作一个简单的网页版地图的文章就介绍到这了,更多相关JS网页版地图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS使用百度地图API自动获取地址和经纬度操作示例
本文实例讲述了JS使用百度地图API自动获取地址和经纬度操作.分享给大家供大家参考,具体如下: 在实际工作中我们经常会遇到这样的问题,但是当我们去看百度API的时候往往又达不到我们的要求. 故此,本篇博文讲述如何使用百度地图API自动获取地址和经纬度: 1.HTML代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht
-
JavaScript地图拖动功能SpryMap的简单实现
使用它你可以轻松实现类似Google.百度地图的拖动效果,对于要展示大图时使用SpryMap是再好不过的了.SpryMap的定制性也很高,通过参数可以设置图片的起始位置.CSS样式等等.除此之外,你也可以设置是否使用平滑的拖动效果. 如何使用 首先在head中加载SpryMap的脚本文件 复制代码 代码如下: <script type="text/javascript" src="spryMap-min2.js"></script> 在
-
js实现百度地图同时显示多个路书效果
本文介绍了js实现百度地图同时显示多个路书效果,主要是以自行车的还车地点作为实例,具体代码如下: 启动路书: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak"></script> <script type="text/javascript" src="js/lushu.js"&g
-
js调用百度地图及调用百度地图的搜索功能
js调用百度地图的方法 代码如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&
-
JavaScript数据可视化:ECharts制作地图
目录 概述 注意事项 一. 使用方式 二. 实现步骤 初步实现代码 效果: geo常见配置 添加上面配置之后的效果图: 显示某一个省份(河南省) 效果 不同区域显示不同颜色 地图和散点图的结合 总结 概述 地图在我们日常的数据可视化分析中是很常见的一种展示手段,不仅美观而且很大气.尤其是在大屏展示中更是扮演着必不可缺的角色 注意事项 一. 使用方式 1.百度地图API(高德地图API) 需要申请百度API 2.矢量地图 需要准备矢量地图数据 二. 实现步骤 1.ECharts最基本的代码结构 引
-
基于JS制作一个简单的网页版地图
目录 前言 一.申请地图的AK密钥 二.主要代码分析 三.全部代码 四.结果展示 前言 以前做了一个安卓版的地图应用,现在突然想做一个简单的网页版地图.这个简单的网页版地图能根据城市名进行位置查询(有个城市列表的小控件,支持城市列表选择),还能根据经纬度进行位置查询.当你进行城市搜索时,或者经纬度查询城市时,该小控件也能自由地切换到目标城市. 一.申请地图的AK密钥 1.首先找到一个地图开放平台,这里以百度地图开放平台为例,步骤如下:进入百度地图开放平台,拉到最底下,进行登录注册,然后进入应用管
-
基于JS实现一个简单的投票demo
目录 演示 说明 源码 body设置 js实现投票的动画 css设定 演示 说明 今天没有什么好的内容分享,跟大家讲一个标签吧增长姿势. line-height CSS 属性用于设置多行元素的空间量,如多行文本的间距. 根据浏览器的解析不同,line-height的表现方式有两种 1.基线之间的距离为line-height 2.lineHeight 为,font-size的上下加上半行距 它的取值为: 1·normal: 默认.设置合理的行间距.取决于用户端.桌面浏览器(包括Firefox)使用
-
node.js制作一个简单的登录拦截器
拦截器在web开发中随处可见,比如站点的管理后台,不说所有人都能进入,所以就需要做一个拦截器并友好的跳转到提示页. 下面我们简单实现一种,判断用户是否登录成功,登录不成功的用户自动重定向到登录页面. 首先我们实现一个过滤器 exports.checkAuth=function(req, res, next) { var token = req.signedCookies.token; if (token && req.session.user && req.session.
-
原生js基于canvas实现一个简单的前端截图工具代码实例
这篇文章主要介绍了原生js基于canvas实现一个简单的前端截图工具代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 先看效果 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{
-
基于Three.js制作一个3D中国地图
目录 1.使用geoJson绘制3d地图 1.1 创建场景相关 1.2 根据json绘制地图 2.增加光照 3.增加阴影模糊 4.增加鼠标事件 5.渲染 6.动画效果 不想看繁琐步骤的,可以直接去github下载项目,如果可以顺便来个star哈哈 本项目使用vue-cli创建,但不影响使用,主要绘制都已封装成类 1.使用geoJson绘制3d地图 1.1 创建场景相关 // 创建webGL渲染器 this.renderer = new THREE.WebGLRenderer( { antiali
-
详解基于electron制作一个node压缩图片的桌面应用
基于electron制作一个node压缩图片的桌面应用 下载地址:https://github.com/zenoslin/imagemin-electron/releases 项目源码Github:https://github.com/zenoslin/imagemin-electron 准备工作 我们来整理一下我们需要做什么: 压缩图片模块 获取文件路径 桌面应用生成 压缩图片 我们需要使用imagemin这个库来压缩图片,这里我们把这个库封装成压缩模块. const imagemin = r
-
基于Unity制作一个简易的计算器
目录 一.前言 二.效果图及源工程 三.实现 1.界面搭建 2.代码实现 四.后记 一.前言 Hello,又见面了,今天分享如何使用Unity制作计算器,难度中等,可以用来学习,或者当成其他项目的小组件导入. 当然,也可以导出来,发布到网页端,来做一个嵌入式工具也可以. 二.效果图及源工程 效果图: 源工程 三.实现 1.界面搭建 所有的按钮摆放到Background下面. 2.代码实现 首先找到所有的按钮,添加到事件: //结果显示 TextComputeProcess = GameObjec
-
php编程实现简单的网页版计算器功能示例
本文实例讲述了php编程实现简单的网页版计算器功能.分享给大家供大家参考,具体如下: 如何通过php代码来实现一个网页版的计算器的简单功能?下面就是通过php基础知识来做的网页版计算器,功能只有"加减剩除求余",其他的一些计算功能可扩展. 实现简单计算器的具体php代码如下(这是php文件jsq.php的全部代码): <html> <head> <title>这是一个网页版的简单计算器</title> <meta http-equi
-
探索Emberjs制作一个简单的Todo应用
目标 使用Emberjs制作一个简单的Todo应用,实现这样一个效果:通过在文本框输入文本,创建一条代办事项,代办事项可以选择优先级,完成的事项可以删除. 准备 完成这个应用,需要做点准备: 1.创建一个html页面,暂时不管样式: 2.脚本:emberjs,handlebars.jQuery.这三个脚本可以从网上获得,我们将把他们加入到head标签里去. 制作 创建页面,加入脚本,就可以开始制作应用.html代码如下: 复制代码 代码如下: <!doctype html> <html&
-
详解用Node.js写一个简单的命令行工具
本文介绍了用Node.js写一个简单的命令行工具,分享给大家,具体如下: 操作系统需要为Linux 1. 目标 在命令行输入自己写的命令,完成目标任务 命令行要求全局有效 命令行要求可以删除 命令行作用,生成一个文件,显示当前的日期 2. 代码部分 新建一个文件,命名为sherryFile 文件sherryFile的内容 介绍: 生成一个文件,文件内容为当前日期和创建者 #! /usr/bin/env node console.log('command start'); const fs = r