一步一步定制自己的google map（小实例）

最新推荐文章于 2020-09-20 13:01:11 发布

纳兰小羽

最新推荐文章于 2020-09-20 13:01:11 发布

阅读量2.2k

点赞数

分类专栏： c#学习笔记文章标签： google function input border xhtml html

本文链接：https://blog.csdn.net/shanshan209/article/details/5720863

版权

c#学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

老规矩先晒图。我选的是无锡的坐标，感兴趣的同学可以选择自己所在地区的坐标。我会在下一篇文章中把基本省市对应的坐标给大家找出来（之所以有这个规矩的话，是因为先晒图可以一目了然，向大家介绍我做的是什么？然后在就一步步剖析。而且也省得我先说需求了）

下面是直接晒代码，代码中有详细解释，只要有点JavaScript+html基础的人都可以看懂

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>地图</title> <mce:style></mce:style><style mce_bogus="1">#searchp{font-family:Arial; font-size:14px; color:#F03C00;margin-left:80px; line-height:24px; font-weight:600;} #world{font-family:Arial; font-size:12px;margin-left:80px; } #map_canvas{width:800px; height:500px; border:solid 1px #9D9D9D;}</style> <mce:script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIA" mce_src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIA" type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body οnlοad="initialize()" οnunlοad="GUnload()"> <form action="#" οnsubmit="showAddress(this.address.value); return false" > <p id="searchp"> 请输地址：<input type="text" name="address" size="40" /> <input type="submit" value="Search" style="width:100px; line-height:20px; font-size:14px;"/> </p><span id="world">(我不知道具体坐落的详细位置)</span> <p id="searchp"> <input type="submit" value="放置标记" style="width:150px; line-height:20px; font-size:14px;" οnclick="showAddress('无锡市人民大会堂'); return false"/> </p><span id="world"> (我直接在地图上寻找位置放置标记) </span> <p id="searchp"> 纬度：<input id="txtLat" type="text" /> 经度： <input id="txtLng" type="text" /> 比例：<input id="zoom" type="text" /> </p> <hr /> <div id="map_canvas" align="center" > </div> <hr /> </form> </body> </html>

最后来说说我要的基本功能吧。我要做的是一个用户出租房源的模块

1）把房源的具体位置通过地图标志出来。通过地图可以看到有两种标志方法

a、大致知道附近的位置，但是无法精确，通过先定位，然后在寻找的方式，用户可以先在附近位置添加标记，然后通过拖拽的方式精确定位

b、用户直接不知道附近有什么，只能通过地图来寻找。或者说用户不想输入地址，直接标志。

2）需要把用户标注的地点的经纬度读取出来，然后存储在数据库中。有时候可能还需要读取比例尺。

3）一个房源只能对应一个标记，不可以有多个标记点。

在后面的学习中我还会去探索google map与后台数据库交互以及google earth的应用。

纳兰小羽

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
10
评论
一步一步定制自己的google map（小实例）

<br />老规矩先晒图。我选的是无锡的坐标，感兴趣的同学可以选择自己所在地区的坐标。我会在下一篇文章中把基本省市对应的坐标给大家找出来（之所以有这个规矩的话，是因为先晒图可以一目了然，向大家介绍我做的是什么？然后在就一步步剖析。而且也省得我先说需求了）<br /><br /> <br />下面是直接晒代码，代码中有详细解释，只要有点JavaScript+html基础的人都可以看懂<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/
复制链接

扫一扫