最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

Google静态地图API实现代码_javascript技巧

来源:动视网 责编:小采 时间:2020-11-27 20:55:52
文档

Google静态地图API实现代码_javascript技巧

Google静态地图API实现代码_javascript技巧: 代码如下: Google 静态地图 API #divStaticMap span { color:Gray; font-size:12px; } #divStaticMap .sel { width:130px; } function getObj(id) { return document.getElementById(id); } f
推荐度:
导读Google静态地图API实现代码_javascript技巧: 代码如下: Google 静态地图 API #divStaticMap span { color:Gray; font-size:12px; } #divStaticMap .sel { width:130px; } function getObj(id) { return document.getElementById(id); } f
 代码如下:



Google 静态地图 API


function getObj(id) {
return document.getElementById(id);
}

function getStaticMap() {
var url = 'http://maps.google.com/maps/api/staticmap?center=';
if (getObj('chkUseNum').checked) {
url += encodeURI(getObj('txtX').value) + ',' + encodeURI(getObj('txtY').value);
}
else {
url += encodeURI(getObj('txtCenter').value);
}
url += '&zoom=' + getObj('txtZoom').value;
url += '&size=' + getObj('txtWidth').value + 'x' + getObj('txtHeight').value;
url += '&format=' + getObj('selImageType').options[getObj('selImageType').selectedIndex].text;
url += '&maptype=' + getObj('selMapType').value;
var trs = getObj('tdFlagList').getElementsByTagName('tr');
for (var i = 1; i < trs.length; i++) {
var txtFlagAddress = trs[i].getElementsByTagName('input')[0];
if (txtFlagAddress.value == '') {
continue;
}
var selFlagColor = trs[i].getElementsByTagName('select')[0];
var selFlagSize = trs[i].getElementsByTagName('select')[1];
var txtFlagLabel = trs[i].getElementsByTagName('input')[1];
url += '&markers=size:' + selFlagSize.value;
url += '|color:' + selFlagColor.options[selFlagColor.selectedIndex].text;
url += '|label:' + txtFlagLabel.value;
url += '|' + encodeURI(txtFlagAddress.value);
}
url += '&sensor=false';

getObj('txtImageUrl').value = url;
getObj('imgMap').src = url;
getObj('imgMap').style.display = 'block';
}

function addMapFlag(o) {
var tr = o.parentNode.parentNode;
var newTr = tr.parentNode.appendChild(tr.cloneNode(true));
var aList = newTr.getElementsByTagName('a');
aList[0].style.display = 'inline';
aList[1].style.display = 'none';
newTr.getElementsByTagName('input')[0].value = '';
return false;
}

function delMapFlag(o) {
var tr = o.parentNode.parentNode;
tr.parentNode.removeChild(tr);
tr = null;
return false;
}

function chkUseNum_onclick(o) {
getObj('txtX').disabled = !o.checked;
getObj('txtY').disabled = !o.checked;
}



参考文档:http://code.google.com/intl/zh-CN/apis/maps/documentation/staticmaps/
注意次API不需要key!
通过设置IMG的SRC地址访问Google地址!
http://maps.google.com/maps/api/staticmap?center=西安,钟楼&zoom=14&size=512x512&maptype=hybrid&sensor=false
-->






























中心位置:



X

(纬度-180~180 经度-90~90)
缩放等级: (0-21)
图像大小: X
(0x0以内)
图片格式:
地图类型:
地图标记:















位置(地址或经纬度以|分割) 标记(A-Z,0-9) 颜色 大小 操作


删除
新增





图片地址:




getStaticMap();




演示代码:http://demo.jb51.net/js/googleStaticMap/index.html

文档

Google静态地图API实现代码_javascript技巧

Google静态地图API实现代码_javascript技巧: 代码如下: Google 静态地图 API #divStaticMap span { color:Gray; font-size:12px; } #divStaticMap .sel { width:130px; } function getObj(id) { return document.getElementById(id); } f
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top