导航:首页 > 编程语言 > 谷歌地图js

谷歌地图js

发布时间:2023-08-20 01:31:17

① Googlemap js api中 如何修改Marker label 字体的颜色 大小等样式

var beachMarker = new google.maps.Marker({
map: map,
position: new_point,
title: rymc + '#',
icon: image,
color: '#000',
draggable: false,
label: {
color: "#FFFFFF", //设置颜色
fontSize: "12px", //字体大小
fontWeight: "1000",//字体粗细
text: "要显示的版文字"
}
});
同时 image设置labelOrigin

例如 var image= {
url: "图标",
scaledSize: new google.maps.Size(20,20),//缩放后整个图像的权大小
anchor: new google.maps.Point(0,0),//默认情况下,锚点位于图像底部的中心点。
labelOrigin: new google.maps.Point(0,0)//Label由标记提供默认情况下,原点位于图像的中心点。
};

② 如何用JS实现:通过浏览器获得用户地理位置,计算预置地理位置与用户地理位置之间的距离,返回数字文本

其实有了 Haversine 公式,两点坐标之后就很简单了。你提供的上海范围太大,且没有坐标,下面例子以上海虹桥机场为参考(纬度:31.2,经度:121.4)。


要从地名获得它的经纬度应该需要有一个庞大的数据库,这点没有仔细研究过。谷歌地图应该会提供此类的 API。你可以网络一下"经纬度查询",有很多网站提供此功能。


测试的时候最好用 IE9 或 Opera 高版本,Firefox 和 Safari 有时会获取不到地理位置,Chrome 会自动屏蔽本地文件


<script type="text/javascript">
// Haversine 公式
function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
var R = 6371;
var dLat = deg2rad(lat2 - lat1);
var dLon = deg2rad(lon2 - lon1);
var a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
function deg2rad(deg) {
return deg * (Math.PI / 180);
}

// 上海虹桥机场经纬度
var lat = 31.2, lon = 121.4;

// 尝试获取地理位置
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(pos) {
var d = getDistanceFromLatLonInKm(
pos.coords.latitude,
pos.coords.longitude,
lat, lon).toFixed(2);
alert("当前位置距上海虹桥机场:" + d + "公里");
});
}
else {
alert("浏览器不支持 geolocation");
}
</script>




③ 用js做谷歌地图判断一个地点在不在这个范围里面

js 代码是支持很多String 类的方法的,建议你可以用indexOf 来判断一个字符串是否存在专于另一个字符串中,属示例: 判断aaa 是否存在于 123aaa456 中 'aaa'.indexOf('123aaa456'); 如果返回值不等于-1 说明存在。

④ GOOGLE地图怎么插入网页中代码怎么写

不要这么麻烦吧,人谷歌都帮你弄得那么完美了,你何苦再自己写这么多的JS代码呢?
在谷歌上查出地图位置,点击右上角有个“分享连接”的链接,把下面那段代码Copy到你自己的网页需要显示的地方就OK了,不仅可以气泡显示地标,而且点击后不会消失,我都是这样做的。
这段代码就是我在谷歌中复制的(但是位置不是你要的,你要什么位置搜出来点击一下“分享链接”代码就出来了):
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=";ie=UTF8&ll=35.86166,104.195397&spn=36.622079,57.568359&z=4&brcurrent=3,0x31508e64e5c642c1:0x951daa7c349f366f,1%3B5,0,1&output=embed"></iframe><br /><small><a href=";ie=UTF8&ll=35.86166,104.195397&spn=36.622079,57.568359&z=4&brcurrent=3,0x31508e64e5c642c1:0x951daa7c349f366f,1%3B5,0,1&source=embed" style="color:#0000FF;text-align:left">查看大图</a></small>

⑤ google map js api中,怎么阻止点击地图,自动弹出一个对话框信息

  1. 下载google 地图sdk js

  2. 添加js到你的网站

  3. 创建需要显示地图的div

  4. 初始化google map js


//初始化map
varmapProp={
center:myCenter,
zoom:17,
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true,
mapTypeId:google.maps.MapTypeId.HYBRID
};

varmap=newgoogle.maps.Map(document.getElementById("googleMap"),mapProp);

//添加标记
varmarker=newgoogle.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

//添加信息框
varinfowindow=newgoogle.maps.InfoWindow({
content:"我的家乡!"
});

最终显示效果,点击可显示你js设置的弹出标记,不会显示多的内容。

阅读全文

与谷歌地图js相关的资料

热点内容
qq群里的机器人买武器 浏览:428
捕鱼达人历史版本 浏览:73
mp4视频文件解密软件 浏览:62
多轴编程哪个软件最方便 浏览:27
老平板哪个是显示屏数据线插座 浏览:849
5sing上传音频文件格式 浏览:171
win10输入文件鼠标右键异常 浏览:634
听幼儿故事用什么app 浏览:514
iphone修改音频文件名 浏览:53
国家气象站点数据在哪里下载 浏览:342
网络设置的网站 浏览:914
手机测量放样怎么导数据和线型 浏览:648
企业展示型网站源码 浏览:781
易花花app哪里下载 浏览:323
外国程序员职业生涯长 浏览:709
看理想app怎么注销账号 浏览:545
数控铣床加工手工编程的步骤有哪些 浏览:411
uc浏览器为什么很多网站进不了 浏览:513
西部数据移动硬盘怎么 浏览:645
批处理修改子目录文件名命令 浏览:405

友情链接