前言

以前做了一个安卓版的地图应用，现在突然想做一个简单的网页版地图。这个简单的网页版地图能根据城市名进行位置查询（有个城市列表的小控件，支持城市列表选择），还能根据经纬度进行位置查询。当你进行城市搜索时，或者经纬度查询城市时，该小控件也能自由地切换到目标城市。

一、申请地图的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、下拉城市选择

注：如对移动版地图感兴趣，参考博主以前的文章Android实战开发--三种地图类型的设计_全村第二帅的博客-CSDN博客_android 开发地图通过添加View控件显示地图，能够显示出地图的默认位置、地图名称等信息。实现切换地图类型的功能，对于地图SDK提供了3种主要的地图类型，即普通地图、卫星图和空白地图。用户通过点击对应的按钮，能够实现不同类型地图之间的相互切换功能。https://blog.csdn.net/qq_53860947/article/details/124506398

如何做一个简单的网页版地图相关推荐

html网页设计简单吗,如何做一个简单的网页设计
很多网页设计初学者都说,国外的网页设计很简单,但是又很容易吸引用户,这里面有什么诀窍吗?做一个网页如何做到界面简洁,内容简单又能打动用户,粘贴住他们.本文素马将讲解简单容易出效果的网页设计技巧,附上精 ...
如何做一个简单的网页导航
如何运用html和css制作一个简单的网页导航代码示例: <!DOCTYPE html> <html><head><meta charset="u ...
学习HTML（九）——做一个简单的网页
通过前面八章的介绍,现在你就可以通过添加图片.设置列表.添加字体.背景颜色等标签,做一个很简单的静态网页了.下面的例子就是我在CodeAcademy中的作业. <!DOCTYPE html&g ...
做一个简单网页(做一个简单网页多少钱)
怎样做一个简易的网页?做一个简单网页多少钱做一个简易的普通网页比较容易.当然,制作的方法有好几种,有的是直接写代码.有的是用绘图软件绘制页面再导出网页.常用的是使用网页制作软件做网页.下面以普通静态 ...
java如何做网页_java怎么做一个简单网页？网页包括什么？
学了java程序之后,大家就可以将这些运用到生活中去,比如做一个简单的网页.正好也可以检测自己学了怎么样,那么接下来,我们就来给大家讲解一下这方面的内容. 用Java语言编写实现一个简单的WEB浏览器 ...
Java怎么做一个简单网页呢？
学java的同学在接触到Java web开发之后都跃跃欲试想要尝试自己开发一个页面,那么应该如何操作呢?都需要使用到哪些技术呢?下面小千就来告诉你. 需要使用到的技术 java 语言知识, jsp 知 ...
如何做一个简单好玩的音乐网页
如何做一个简单好玩的音乐网页作者:朝思下面我们开始用所学的的知识,开始做一个简单而方便的音乐页面,未使用插件一共分为两部分: 一:播放部分二:钢琴部分由上图可见,左上角的为播放部分,可以实现 ...
用html5做一个简单网页_用新款ws2812灯带做一个简单的窗花
本文转自:DF创客社区-未经许可不可转载原文链接(附件请于原文下方下载): 用新款ws2812灯带做一个简单的窗花-创意生活论坛-DF创客社区mc.dfrobot.com.cn 作者:屌丝王小明 ...
一个简单的网页抓取工具
前两天遇到一个妹子,她说不会从拉网页,我想用node做个网页抓取工具是何尝的简单,于是装x之路开始了. 其实想法很简单,由网址得到html,由html解析css,js,image等,分别下载就行了, ...

如何做一个简单的网页版地图

前言

一、申请地图的AK密钥

二、主要代码分析

三、全部代码

四、结果展示

如何做一个简单的网页版地图相关推荐

最新文章

热门文章