html页面插入百度谷歌地图的方法

html页面插入百度谷歌地图

一、百度地图

1、打开“百度地图生成器”的网址：http://api.map.baidu.com/lbsapi/creatmap/index.html

2、在“1.定位中心点”中，查找具体位置

3、在“2.设置地图”中，按照自己的需求修改地图的外观：

a、地图的宽和高
b、地图上显示的按钮（缩放、缩略图、比例尺）
c、鼠标和键盘对地图的操作

4、在“3.添加标注”中，添加自己想要标注的位置和信息

5、在“第二步 获取代码”中，点击“获取代码”按钮，然后复制代码

6、把上一步生成的代码保存为html文件（假设保存为map.html）。记住在保存前将代码内编码

修改为charset=utf-8"，这样，上一步添加标注里输入的备注和名称才不会乱码显示

7、使用iframe标签，把地图添加到现有的网页中，如：

二、谷歌地图

1、在谷歌地图中https://www.google.com.hk/maps/@25.0511929,121.5940662,15z?hl=zh-CN添加链接描述

输入地址，搜索到指定地点之后，点击“共享”按钮

点击“共享按钮”之后，选择“嵌入地图”，然后点击“复制HTML”

将复制的HTML代码粘贴到相应位置，根据自己需求修改宽高

1

调用百度地图为什么出现乱码 图标不显示
图标消失是原icon图片没有了,手动把

new BMap.Icon(“http://app.baidu.com/map/images/us_mk_icon.png”

/修改为/

new BMap.Icon(“http://map.baidu.com/image/us_mk_icon.png”

2

中文乱码是因为生成的网页代码中,charset设置成gbk了，手动把

/修改为/

3

自定义名字undefind是因为生成的代码有个错误，手动把69行左右的代码

var label = new BMap.Label(json.titlea,{“offset”:new BMap.Size(json.icon.lb-json.icon.x+10,-20)});

/修改为/

var label = new BMap.Label(json.title,{“offset”:new BMap.Size(json.icon.lb-json.icon.x+10,-20)});