&旅行的梦想并不遥远，只要一颗流浪四方的心。&&&唐人立。
最早认识唐人立的时候，他还是大二的学生。他独自完成了&南京20年规划地图&。几年前，他完成了自己的第一本著作，逃学去旅行《一个人走世界&&大学4年200城的旅行》。而现在，他正执行着他的&辞职去旅行&计划。他好心的老板还多给他发了一个月的工资。从南京，到台湾，从曼谷到斯里兰卡&&2个月来，唐人立走过太多地方。是他原创的图片和文字，让我渐渐对自助游产生了兴趣，并决定记录下旅游的每一刻。
于是，我开始着手制作了这个旅行地图。可能它还不够完善，但的确它能给我们带来太多的正能量。希望有越来越多的人，能够用这种方式，去记录自己的旅途。THX。
代码其实很简单，简单的地图展示，简单的覆盖物，简单的信息窗口。
你要做的，其实只是申请一个key：
然后将下面的代码复制到你的网站上，并使用你自己的key。
第一步、地图展示
中心点坐标可以通过坐标拾取工具来找：
地图级别在国内建议12-18，国外建议在4-6.
//初始化地图对象，加载地图
function mapInit(){
mapObj = new AMap.Map("iCenter",{center:new AMap.LngLat(121..239637),
level:17});
addBuildings();
第二步、添加覆盖物
覆盖物，就是marker，这里用的默认的覆盖物。蓝色的，挺好看。
//实例化点标记
function addMarker(){
marker=new AMap.Marker({
icon:"/images/marker_sprite.png",
position:new AMap.LngLat(116..907761)
marker.setMap(mapObj);
//在地图上添加点
第三步、添加信息窗口
信息窗口用了自定义信息窗口，因为觉得兰蓝色的比较好看。
自定义信息窗口，分为3个部分，头，中间，尾巴。
关闭按钮也可以使用自定义图片。
//构建自定义信息窗体
function createInfoWindow(title,content){
var info = document.createElement("div");
info.className = "info";
// 定义顶部标题
var top = document.createElement("div");
top.className = "info-top";
var titleD = document.createElement("div");
titleD.innerHTML =
var closeX = document.createElement("img");
closeX.src = "/images/close2.gif";
closeX.onclick = closeInfoW
top.appendChild(titleD);
top.appendChild(closeX);
info.appendChild(top);
// 定义中部内容
var middle = document.createElement("div");
middle.className = "info-middle";
middle.innerHTML =
info.appendChild(middle);
// 定义底部内容
var bottom = document.createElement("div");
bottom.className = "info-bottom";
var sharp = document.createElement("img");
sharp.src = "/images/sharp.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
第四步、结果面板
结果面板只要是为了鼠标放在上面时，可以打开相应的信息窗口。
HTML结构：
&li&&a href="javascript:void(0);" onmouseover="myOpen2();"&曼谷&/a&&/li&
&li&&a href="javascript:void(0);" onmouseover="myOpen();"&斯里兰卡&/a&&/li&
信息窗口展开代码：
function myOpen(){
infoWindow.open(mapObj,marker.getPosition());
function myOpen2(){
infoWindow2.open(mapObj,marker2.getPosition());
--------------------------------------------------------------------------
全部源代码：
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&逃学去旅行&/title&
&!-- 页面布局样式 --&
&link rel="stylesheet" type="text/css" href="/Public/css/demo.Default.css" /&
&script language="javascript" src="/maps?v=1.2&key=【您的key】"&&/script&
#iCenter{float:left;width:<span style="background-color: #f5f5f5; color: #px;height:<span style="background-color: #f5f5f5; color: #px;}
.infobox{float:left;width:<span style="background-color: #f5f5f5; color: #px;height:<span style="background-color: #f5f5f5; color: #px;text-align:center;padding:10px 0;background:#efefef;}
.infobox h1{margin:<span style="background-color: #f5f5f5; color: # 20px;}
.infobox li a{text-decoration:none;font-size:20px;width:<span style="background-color: #f5f5f5; color: #%;display:block;padding:30px 0;border:1px dashed #ccc;border-width:1px 0;}
.infobox li a:hover{background:#ccc;}
&body onLoad="mapInit()"&
&div id="iCenter"&&/div&
&div class="infobox"&
&h1&逃学去旅行2&/h1&
&li&&a href="javascript:void(0);" onmouseover="myOpen2();"&曼谷&/a&&/li&
&li&&a href="javascript:void(0);" onmouseover="myOpen();"&斯里兰卡&/a&&/li&
&script language="javascript"&
var mapObj,toolB
var marker,marker2;
//初始化地图对象，加载地图
function mapInit(){
mapObj = new AMap.Map("iCenter",{center:new AMap.LngLat(88.505859,21.371244),level:4});
//地图中添加地图操作ToolBar插件
mapObj.plugin(["AMap.ToolBar"],function(){
toolBar = new AMap.ToolBar();
mapObj.addControl(toolBar);
//地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体
addMarker();
//添加marker标记
function addMarker(){
mapObj.clearMap();
marker = new AMap.Marker({
map:mapObj,
position:new AMap.LngLat(79.914551,6.871893), //位置-斯里兰卡
icon:"/images/0.png" //复杂图标
marker2 = new AMap.Marker({
map:mapObj,
position:new AMap.LngLat(100.546875,13.731381), //位置-曼谷
icon:"/images/0.png" //复杂图标
AMap.event.addListener(marker,'mouseover',function(){ //鼠标点击marker弹出自定义的信息窗体
infoWindow.open(mapObj,marker.getPosition());
AMap.event.addListener(marker2,'mouseover',function(){ //鼠标点击marker弹出自定义的信息窗体
infoWindow2.open(mapObj,marker2.getPosition());
//实例化信息窗体
var infoWindow = new Window({
isCustom:true,
//使用自定义窗体
content:createInfoWindow('斯里兰卡&&&span style="font-size:11color:#F00;"&采茶人&/span&',"&img src='taoxue_1.jpg' style='width:92float:margin:0 5px 5px 0;'&&img src='taoxue_2.jpg' style='width:92float:margin:0 5px 5px 0;'&&img src='taoxue_3.jpg' style='width:92float:margin:0 5px 5px 0;'&尽管斯里兰卡人民并不富裕，但是他们对生活很满足。每一个微笑的斯里兰卡人的脸上，更多的是他们对待生活的热情。&a href='/'&@唐人立逃学去旅行&/a&"),
size:new AMap.Size(300, 0),
offset:new AMap.Pixel(0, -50)//-113, -140
var infoWindow2 = new Window({
isCustom:true,
//使用自定义窗体
content:createInfoWindow('曼谷&&&span style="font-size:11color:#F00;"&泰国泼水节&/span&',"&img src='taoxue_7.jpg' style='width:92float:margin:0 5px 5px 0;'&&img src='taoxue_6.jpg' style='width:92float:margin:0 5px 5px 0;'&&img src='taoxue_5.jpg' style='width:92float:margin:0 5px 5px 0;'&如果说青春是一场说走就走的旅行，那么泰国的泼水节才更好地诠释着什么是青春。一起疯狂吧！&a href='/'&@唐人立逃学去旅行&/a&"),
size:new AMap.Size(300, 0),
offset:new AMap.Pixel(0, -50)//-113, -140
//构建自定义信息窗体
function createInfoWindow(title,content){
var info = document.createElement("div");
info.className = "info";
// 定义顶部标题
var top = document.createElement("div");
top.className = "info-top";
var titleD = document.createElement("div");
titleD.innerHTML =
var closeX = document.createElement("img");
closeX.src = "/images/close2.gif";
closeX.onclick = closeInfoW
top.appendChild(titleD);
top.appendChild(closeX);
info.appendChild(top);
// 定义中部内容
var middle = document.createElement("div");
middle.className = "info-middle";
middle.innerHTML =
info.appendChild(middle);
// 定义底部内容
var bottom = document.createElement("div");
bottom.className = "info-bottom";
var sharp = document.createElement("img");
sharp.src = "/images/sharp.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
//关闭信息窗体
function closeInfoWindow(){
mapObj.clearInfoWindow();
function myOpen(){
infoWindow.open(mapObj,marker.getPosition());
function myOpen2(){
infoWindow2.open(mapObj,marker2.getPosition());
页面地址：
阅读(...) 评论()(编辑: liuchuanqiang )
没有相关文章
您可以使用“← | →”键快速翻页，或者进入模式！
事件进展：
相关文章：
热门新闻排行本周本月&&(0)&&(0)&&(0)&&(0)&&(0)&&(0)&&(0)&&(0)&&(0)&&(0)&&(10813)&&(8980)&&(5525)&&(2944)&&(2841)&&(2763)&&(2481)&&(2223)&&(2211)&&(2125)企业信息化
计算机技术
座右铭：研究人员探测知识的疆界需要很多与开拓者同样的品格；事业心和进取心。——贝弗里奇
【高德地图API】如何打造十月妈咪品牌地图？日联系商易上海电子商务网站建设，了解更多
&择要：品牌地图除了地图，商铺标点外，还有微博存眷，路线查询等功能。
-----------------------------------------------------------------
网站视图：
-----------------------------------------------------------------
一、起首获取商号的信息
一般品牌点会供给地址，商号名，德律风，图片等信息。
这里，我们须要把地址转换成经纬度信息。
有两种办法，一是手工在地图上点，点到合适的地位，保存该点经纬度，保存下来。
第二种办法是，经由过程地址解析，获得一个经纬度。
这里采取的是第二个办法。
全部代码如下：（请自行展开代码，或点击对象：http://www.ui-love.net/uiweb/octmami/getPoint.htm）
点击展开代码
&!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"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&!--&style&
body{ margin:0; padding:0;font:12px/16px Verdana， Helvetica， Arial， sans-}
&/style&--&
&link rel="stylesheet" href="/Public/Css/demo.Default.css" type="text/css" /&
&title&地懂得析（地址匹配）&/title&
&script language="javascript" src="/webapi/init？v=1.1"&&/script&
&script language="javascript"&
var mapObj，toolbar，overview，
function mapInit（）
var opt = {
level:13，//设置地图缩放级别
center:new AMap.LngLat（116.412352，39.953173），//设置地图中间点
doubleClickZoom:true，//双击放大地图
scrollWheel:true//鼠标滚轮缩放地图
mapObj = new AMap.Map（"iCenter"，opt）;
mapObj.plugin（["AMap.ToolBar"，"AMap.OverView"，"AMap.Scale"]，function（）
toolbar = new AMap.ToolBar（）;
toolbar.autoPosition=false; //加载对象条
mapObj.addControl（toolbar）;
overview = new AMap.OverView（）; //加载鹰眼
mapObj.addControl（overview）;
scale = new AMap.Scale（）; //加载比例尺
mapObj.addControl（scale）;
function geocodeSearch（）{
var addressName = document.getElementById（""address""）.
if（addressName== ""）{
alert（"请输入地址！"）;
var GeocoderOption = {
range:300，//局限
crossnum:2，//路子交叉口数
roadnum :3，//路线记录数
poinum:2//POI点数
var geo = new AMap.Geocoder（GeocoderOption）;
geo.geocode（addressName，addressToGeoSearch_CallBack）;
function addressToGeoSearch_CallBack（data）{
var resultStr="";
if（data.status =="E0"）
for （var i = 0; i & 1; i++） {
resultStr += "&span class=\"spoi\"&&a href=\"javascript:var s=mapObj.setCenter（new AMap.LngLat（"""+ data.list[i].x +"""，"""+ data.list[i].y +"""））;\"&"+data.list[i].name+"&/a&&/span&";
var windowsArr = new Array（）;
var markerOption = {
icon:"/webapi/static/Images/"+（i+1）+".png"，
position:new AMap.LngLat（data.list[i].x，data.list[i].y）
//输出经纬度
document.getElementById（""myPt""）.innerHTML += data.list[i].x + ""，"" + data.list[i].y + ""&br /&"";
var mar =new AMap.Marker（markerOption）;
mar.id=（i+1）;
var infoWindow = new Window
content:data.list[i].name，
size:new AMap.Size（150，0），
offset:{x:-25，y:-62}
windowsArr.push（infoWindow）;
mapObj.addOverlays（mar）;
var aa=function（e）{infoWindow.open（mapObj，mar.getPosition（））;};
mapObj.bind（mar，"click"，aa）;
mapObj.setFitView（）;
else if（data.status =="E1"）
resultStr = "未查找到任何成果!&br /&建议：&br /&1.请确保所有字词拼写正确。&br /&2.测验测验不合的关键字。&br /&3.测验测验更宽泛的关键字。";
resultStr= "错误信息："+data.state+"请对比API Server v2.0.0 简明提示码对比表查找错误类型";
document.getElementById（"result"）.innerHTML = resultS
&body onload="mapInit（）;"&
&table width="661px"
border="0" cellpadding="0" cellspacing="0"&
&td&&div id="iCenter" style="height:300width:661px"& &/div&&/td&
&div&地懂得析（地址匹配）&b&地址：&/b&&input type="text" id="address" name="address" value="北京市海淀区姑苏街" /& &input type="button" value="查询" onclick="geocodeSearch（）" /&&/div&
&div id="myPt"&&/div&
&tr&&td&&div style="padding:0px 0 4px 2 background-color:＃D1EEEE"&&b&搜刮成果:&/b&&/div&&/td&&/tr&
&tr& &td&&div id="result" name="result" style="overflow:margin-top:5px"& &/div&&/td& &/tr&
&
二、在地图上标注商号，并添加信息窗口。
地图项目组没做太错杂，就是地图的显现，和信息窗口的添加并显现。
js项目组代码如下：
var mapObj，tool，view，
function mapInit（）{
var opt = {
level:12，
center:new AMap.LngLat（116..953173）
mapObj = new AMap.Map（"imap"，opt）;
mapObj.plugin（["AMap.ToolBar"，"AMap.OverView，AMap.Scale"]，function（）{
//加载对象条，对象条包含标的目标键盘、缩放标尺和主动定位把握
tool = new AMap.ToolBar（{
direction:false，
ruler:false
//autoPosition:false//禁止主动定位
mapObj.addControl（tool）;
//加载鹰眼
view = new AMap.OverView（{visible:false}）;
mapObj.addControl（view）;
//加载比例尺
scale = new AMap.Scale（）;
mapObj.addControl（scale）;
infoWin1 = new Window（{
content:"&h4&北京庄胜崇光&/h4&&p&地址：宣武门外大街10号&/p&&p&德律风：（010）&/p&"
infoWin2 = new Window（{
content:"&h4&北京翠微大厦&&img src=""new.gif"" /&&/h4&&p&地址：
海淀区花圃路2号翠微大厦牡丹园店1楼（近地铁牡丹园站） &/p&&p&德律风：
（010）， （010）&/p&"
infoWin3 = new Window（{
content:"&h4&北京当代商城&/h4&&p&地址：
海淀区中关村大街40号当代商城（国民大学对面）&/p&&p&德律风：
（010）&/p&"
infoWin4 = new Window（{
content:"&h4&北京新世界百货&/h4&&p&地址：崇文区崇文门外大街3-5号（地铁崇文门站南50米）&/p&&p&德律风：
（010）&/p&"
infoWin5 = new Window（{
content:"&h4&安贞门华联&/h4&&p&地址：
朝阳区安贞里5区4号楼&/p&&p&德律风：
（010）&/p&"
infoWin6 = new Window（{
content:"&h4&亚运村华堂店&/h4&&p&地址：
朝阳区北四环东路108号千鹤家园（北苑家园大牌匾旁） &/p&&p&德律风：
（010）&/p&"
infoWin7 = new Window（{
content:"&h4&新街口物美&/h4&&p&地址：
西城区赵登禹路2号（近新开胡同） &/p&&p&&/p&"
infoWin8 = new Window（{
content:"&h4&西单商场十里堡店&/h4&&p&地址：
朝阳区朝阳路十里堡甲3号&/p&&p&德律风：
（010）&/p&"
infoWin9 = new Window（{
content:"&h4&答复门百盛&/h4&&p&地址：
答复门内大街101号&/p&&p&德律风：
（010）&/p&"
infoWin10 = new Window（{
content:"&h4&北京金源新燕莎&/h4&&p&地址：
北京市海淀区远通衢1号金源购物广场西南角6层（E21电梯直达） &/p&&p&德律风：
（010）&/p&"
//实体店标注
function openWin1（）{
infoWin1.open（mapObj，new AMap.LngLat（116..895653））;
}
function openWin2（）{
infoWin2.open（mapObj，new AMap.LngLat（116..977461））;
}
function openWin3（）{
infoWin3.open（mapObj，new AMap.LngLat（116..970540））;
}
function openWin4（）{
infoWin4.open（mapObj，new AMap.LngLat（116..898618））;
}
function openWin5（）{
infoWin5.open（mapObj，new AMap.LngLat（116..971530））;
}
function openWin6（）{
infoWin6.open（mapObj，new AMap.LngLat（116..987982））;
}
function openWin7（）{
infoWin7.open（mapObj，new AMap.LngLat（116..940376））;
}
function openWin8（）{
infoWin8.open（mapObj，new AMap.LngLat（116..915053））;
}
function openWin9（）{
infoWin9.open（mapObj，new AMap.LngLat（116..907966））;
}
function openWin10（）{
infoWin10.open（mapObj，new AMap.LngLat（116..958694））;
}
&
&
&
三、添加微博
添加微博存眷的办法，请参考新浪微博开放平台：/widget/followbutton.php
存眷按钮代码：
&html xmlns:wb=&/wb&&
&script src="http://tjs./open/api/js/wb.js" type="text/javascript" charset="utf-8"&&/script&
&wb:follow-button uid="" type="gray_1" width="67" height="24" &&/wb:follow-button&
&
四、网站整体框架
左侧大项目组是地图，右侧是实体店的列表。
全部html代码：
&!DOCTYPE HTML&
&html&
&head&
&title&十月妈咪北京实体店&/title&
&link href="oct.css" rel="stylesheet" type="text/css" /&
&script language="javascript" src="/webapi/init？v=1.1"&&/script&
&script language="javascript" type="text/javascript" src="oct.js"&&/script&
&html xmlns:wb=&/wb&&
&script src="http://tjs./open/api/js/wb.js" type="text/javascript" charset="utf-8"&&/script&
&/head&
&body onload="mapInit（）;"&
&div class="header clearfix"&&h1&&a href="" target="_blank"&&img src="logo.gif" /&&/a&十月妈咪北京实体店&/h1&&/div&
&div class="container clearfix"&
&div class="wider" id="imap"&&/div&
&div class="sider"&
&div class="mainshops"&
&div class="mainshop clearfix"&
&img class="shopimg" src="shop1.jpg" /&
&h4&&a href="javascript:void（0）;" onmou搜刮引擎优化ver="openWin1（）;"&北京庄胜崇光&/a&&/h4&
&p&全场八折&/p&
&div class="mainshop clearfix"&
&img class="shopimg" src="shop2.jpg" /&
&h4&&a href="javascript:void（0）;" onmou搜刮引擎优化ver="openWin2（）;"&北京翠微大厦&&img src="new.gif" /&&/a&&/h4&
&p&.- 18. 周年店庆 满200减100 85折上折&/p&
&div class="mainshop clearfix"&
&img class="shopimg" src="shop3.jpg" /&
&h4&&a href="javascript:void（0）;" onmou搜刮引擎优化ver="openWin3（）;"&北京当代商城&/a&&/h4&
&p&项目组满300减150&/p&
&div class="mainshop clearfix"&
&img class="shopimg" src="shop4.jpg" /&
&h4&&a href="javascript:void（0）;" onmou搜刮引擎优化ver="openWin4（）;"&北京新世界百货&/a&&/h4&
&p&无优惠活动&/p&
&div class="othershops"&
&div class="othershop clearfix"&
&h4&&a href="javascript:void（0）;" onmou搜刮引擎优化ver="openWin5（）;"&安贞门华联&/a&&/h4&
&p&项目组五折起&/p&
&div class="othershop clearfix"&
&h4&&a href="javascript:void（0）;" onmou搜刮引擎优化ver="openWin6（）;"&亚运村华堂店&/a&&/h4&
&p&无优惠&/p&
&div class="othershop clearfix"&
&h4&&a href="javascript:void（0）;" onmou搜刮引擎优化ver="openWin7（）;"&新街口物美&/a&&/h4&
&p&无优惠&/p&
&div class="othershop clearfix"&
&h4&&a href="javascript:void（0）;" onmou搜刮引擎优化ver="openWin8（）;"&西单商场十里堡店&/a&&/h4&
&p&全场九折&/p&
&div class="othershop clearfix"&
&h4&&a href="javascript:void（0）;" onmou搜刮引擎优化ver="openWin9（）;"&答复门百盛&/a&&/h4&
&p&项目组五折起&/p&
&div class="othershop clearfix"&
&h4&&a href="javascript:void（0）;" onmou搜刮引擎优化ver="openWin10（）;"&北京金源新燕莎&/a&&/h4&
&p&无优惠&/p&
&div class="copyright"&
&p&copyright by &a target="_blank" href="http://ui-love.net"&UI-LOVE&/a&&/p&
&wb:follow-button uid="" type="gray_1" width="67" height="24" &&/wb:follow-button&
&/div&
&/div&
&/body&
&/html&
&
五、运行示例
示例地址：http://www.ui-love.net/uiweb/octmami/index.htm
&
最后&&
来来来，投个票：/Watch？page=6
此页面上的内容需要较新版本的 Adobe Flash Player。高德地图怎么样收藏地图_百度知道
高德地图怎么样收藏地图
提问者采纳
是收藏地图还是收藏地理位置
如果是收藏地理位置，在你要收藏的位置上长按，然后会出现一个向右的&图标 ，点一下，然后苹果手机下拉是有个添加书签选项、安卓手机是有个收藏选项；点击选择后编辑好名称，保存下就行了
其他类似问题
按默认排序
其他1条回答
跟我的情况一样，太假了，明明点收藏看收藏夹是空的
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁1)">1)">1" ng-class="{current:{{currentPage==page}}}" ng-repeat="page in pages"><li class='page' ng-if="(endIndex<li class='page next' ng-if="(currentPage
相关文章阅读