導航:首頁 > 編程語言 > 谷歌地圖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相關的資料

熱點內容
ipad添加不了qq郵箱賬號和密碼 瀏覽:503
matlab中文文件名 瀏覽:236
excel是啥類型文件 瀏覽:471
安慶培訓編程怎麼選 瀏覽:817
vs2010mfc工具箱 瀏覽:402
刪除文件重置win10怎麼恢復 瀏覽:180
新裝win10有線連不上 瀏覽:785
資料庫商品名唯一怎麼標注 瀏覽:214
電信5g網路什麼時候出 瀏覽:626
手機如何把視頻打包到文件夾裡面 瀏覽:248
excel數據轉vcf文件 瀏覽:585
編程題如何左右翻轉 瀏覽:920
wp10微信安裝不了 瀏覽:793
微軟資料庫密碼怎麼改 瀏覽:627
我們是貴族什麼app可以看 瀏覽:65
哪個app認字免費 瀏覽:964
少兒編程線上教育如何 瀏覽:137
ps3升級檢測不到優盤升級文件 瀏覽:845
vs連接資料庫顯示數據 瀏覽:867
win10的設備和列印機 瀏覽:876

友情鏈接