『壹』 開發中怎樣在小程序中添加天氣組件
首先分析製作的思路：
1.在app.json文件的pages數組里加上main文件夾和template（模板）文件夾的路徑。
2.在main.js文件中，在onLoad()函數中調用loadInfo()函數。
3. 自定義獲取位置的函數loadInfo()，調用wx.getLocation，用於獲取當前的緯度（latitude）和經度（longitude）。在loadInfo()函數中接著調用loadCity()函數。
4. 自定義獲取城市的函數loadCity()，調用wx.request，在「網路地圖開放平台」網站中注冊自己的AK，通過獲取城市信息的網址（http://api.map..com/geocoder/v2/?ak=自己的ak&location=緯度值,經度值&output=json）實現當前城市名稱的獲取。
在loadCity()函數中接著調用loadWeather()函數。
5.自定義獲取天氣的函數loadWeather(),根據已有的城市名稱，通過獲取天氣信息的網址（http://wthrcdn.etouch.cn/weather_mini?city=城市名）實現天氣信息的數據獲取。
6.在main.wxml文件中，未來天氣部分通過import調用了自定義模板文件itemtpl.wxml。
然後分析項目中文件的源碼。
app.json文件的代碼如下：
{
"pages":[
"pages/main/main",
"pages/template/itemtpl",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "天氣",
"navigationBarTextStyle":"black"
}
}
main.wxml的代碼如下：
<view class='cont'>
<!-- 今日天氣-->
<view class='today'>
<view class='info'>
<view class='tempe'>{{today.wen}}°C</view>
<view class='weather'>{{today.todayInfo.type}}{{today.todayInfo.fengxiang}}</view>
<view>溫馨提示：{{today.ganmao}}</view>
<view class='city'>{{city}}</view>
</view>
</view>
<!-- 未來天氣-->
<import src="../template/itemtpl"/>
<view class='future'>
<block wx:for="{{future}}">
<template is="future-item" data="{{item}}"/>
</block>
</view>
</view>
main.wxss文件的代碼如下：
/**/
.cont{
font-size:30rpx;
width:100%;
height:100%;
}
.today{
padding:50rpx 0 0 0;
height:50%;
}
.info{
padding:20rpx;
background:rgba(0,0,0,.8);
line-height: 1.5em;
color:#eee;
}
.tempe{
font-size:90rpx;
text-align: center;
margin:30rpx 0;
}
.weather{
text-align: center;
}
.city{
font-size:40rpx;
color:#f60;
text-align: right;
margin: 30rpx 10rpx 0 0;
}
.future{
display:flex;
flex-direction: row;
height:100%;
padding:20rpx 0 20rpx 10rpx;
background:rgba(0,0,0,.8);
text-align: center;
margin:50rpx 0 70rpx 0;
color:#eee;
}
.future-item{
min-height: 100%;
width:160rpx;
margin: 0 10rpx;
border:solid 1px #f90;
padding:10rpx 0 0 0;
line-height:2em;
}
main.js文件的代碼如下：
//
Page({
data: {
// weatherData:''
city:"" ,
today:{},
future:{},
},
onLoad: function () {
this. loadInfo();
},
//自定義獲取位置
loadInfo:function(){
var page=this;
wx.getLocation({
type: 'gcj02', //返回可以用於wx.openLocation的經緯度
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
console.log(latitude, longitude);
page.loadCity(latitude, longitude);
}
})
} ,
//自定義獲取城市
loadCity: function (latitude, longitude){
var page = this;
wx.request({
url: 'http://api.map..com/geocoder/v2/?ak=自己的AK &location=' + latitude + ',' + longitude + '&output=json',
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res);
var city=res.data.result.addressComponent.city;
city=city.replace("市","");
page.setData({
city:city
});
page.loadWeather(city);
}
})
},
//自定義獲取天氣
loadWeather: function (city) {
var page = this;
wx.request({
url: 'http://wthrcdn.etouch.cn/weather_mini?city=' + city,
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res);
var future=res.data.data.forecast;
var todayInfo=future.shift();
var today=res.data.data;
today.todayInfo=todayInfo;
page.setData({
today:today,
future:future,
});
}
})
}
})
itemtpl.wxml的代碼如下：
<!-- 模板文件-->
<template name="future-item">
<view class="future-item">
<view>{{item.date}}</view>
<view>{{item.type}}</view>
<view>{{item.fengxiang}}</view>
<view>{{item.low}}</view>
<view>{{item.high}}</view>
</view>
</template>
至此，案例製作完成。
『貳』 百度地圖經緯度web糾偏怎麼用
網路地圖糾偏介面如下：
http://api.map..com/ag/coord/convert?from=0&to=4&x=113.540124&y=23.517846
from=0 代表傳入真實經緯度
to=4 代表轉換成網路回糾偏後的答經緯度
輸出json格式：
{"error":0,"x":"MTEzLjU1MTgwNzMy","y":"MjMuNTIxMjMzOTEwNjQ2"}
x、y分別是糾偏後的經緯度值，base64編碼格式，大家可根據base64編碼轉換成明碼，如果是在網路地圖上定位則不需要轉換，他們API支持這格式。
『叄』 百度地圖API基本使用（一）
由於最近項目有需要，所以最近開始研究網路地圖API的使用，簡單的介紹一下 網路地圖javaScript API 它的使用，希望能夠對小夥伴們有所幫助，後續有機會再做深入的研究。
有興趣的小夥伴可以自行查找網路地圖API
網路地圖開放平台開發文檔中的JavaScript API
在使用網路地圖之前，我們需要擁有一個自己的網路賬號，申請注冊成為網路開發者，然後我們需要創建一個瀏覽器端應用，就可以獲取到一個唯一的服務秘鑰（AK）
申請秘鑰（AK）
最終html中的內容如下:
實現效果如下：可以進行移動和放大
根據id去獲取對應的元素就是我們後續網路地圖所要去填充的元素，其實創建容器的時候還有一個coordsType屬性去控制坐標的類型，不過我們不配置的話一般都是默認配置為5也就是bd0ll坐標類型， 感興趣的小夥伴可以去看一看這些坐標類型都有哪些？可以來評論區交流學習
有兩種設置中心點的方式，一種是通過上面那樣根據經緯度去設置中心點坐標，第二種就是根據城市名作為中心點
Ps：map是我們的容器不要忘了
1.初始化地圖時，進行關閉配置
2.使用地圖的方法進行配置
1.地圖初始化
添加控制項前，地圖需要進行初始化。例如，要將標准地圖控制項添加到地圖中，可在代碼中添加如下內容：
2.添加多個控制項
在本例中我們向地圖添加一個平移縮放控制項、一個比例尺控制項和一個縮略圖控制項。在地圖中添加控制項後，它們即刻生效。
初始化控制項時，可提供一個可選參數，其中的anchor和offset屬性共同控制控制項在地圖上的位置。 anchor表示控制項的停靠位置，即控制項停靠在地圖的哪個角。當地圖尺寸發生變化時，控制項會根據停靠位置的不同來調整自己的位置。
個性化地圖樣式編輯器
通過樣式ID調用個性化地圖樣式（推薦）
1.創建個性化地圖樣式
進入地圖開放平台控制台頁面，在我的地圖中，創建一個地圖樣式：
2.編輯樣式
點擊創建的地圖樣式，進入樣式編輯器，根據您的需求自由編輯地圖樣式：
3.發布樣式並獲取樣式ID
完成編輯後，在我的地圖或者編輯器中發布該地圖樣式，獲取發布後生成的樣式ID：
4.在JavaScript API中應用地圖樣式
將第三步中獲取的樣式ID作為setMapStyleV2方法的參數。
相關代碼如下：
注意：
1.使用個性化地圖前，請參考Hello World構建基礎地圖；
2.setMapStyleV2方法需要在地圖初始化（centerAndZoom）完成後執行；
3.樣式更新不會改變樣式ID。因此如果有更新樣式的需求，重新編輯發布就可以完成更新。不需要修改JavaScript API調用代碼；
4.如果樣式ID在控制台中被刪除，但JavaScript API還在繼續調用。那麼將會渲染默認樣式的地圖；
通過樣式JSON調用個性化地圖樣式
1.獲取樣式JSON
前序流程和樣式ID調用地圖樣式流程一致，進入我的地圖，創建一個地圖樣式，進入編輯器編輯完成後，直接通過編輯器中的「下載JSON」功能獲取JSON代碼：
2.在JavaScript API中應用地圖樣式
將上一步中獲取的樣式JSON作為setMapStyleV2方法的參數。
相關代碼如下：
設置後地圖效果如下:
上面這些都是一些簡單的使用，後續我在使用的過程中遇到的一些問題以及解決過程，新的API的使用會持續更新分享，網路地圖的API開發文檔給的還是很全面的，不過就是目前他提供的都是一些在線開發，對於一些內網的公司就不太友好了，所以後續這塊我需要去做一下離線開發的研究，等我把離線地圖開發弄好之後，再給大家分享。
感謝諸君的觀看，文中如有紕漏，歡迎在評論區來交流。如果這篇文章幫助到了你，歡迎點贊和關注。
『肆』 js百度地圖怎麼獲取城市編碼
網路地圖里的geocoder
http://api.map..com/geocoder/v2/?ak=你的ak值&location=47.358015,123.970903&output=json
返回結專果里有屬個 cityCode
『伍』 如何在網頁中調用百度地圖api
1.進入:http://dev..com/wiki/static/map/API/tool/creatMap/ （創建地圖-網路地圖API所見即所得工具，網路官方地址，大家放心使用）
切換城市，搜索需標注位置。（如下圖：）
設置地圖：大家可以對網站顯示地圖的寬高進行設置，其餘選項不動。
添加標註：點擊第一個圖標後，在右側找到自己的位置，單擊滑鼠左鍵可定位。標記圖標處可更換圖標形狀，名稱和備注填入位置相關信息。（如下圖：）
步驟閱讀
完成以上4步後，點獲取代碼。
獲取代碼如下：（注意：通常我們在網頁中只要插入以下代碼，小蟲標注出來，其餘的可不用。）
1.在<head></head>間插入下面代碼：這是樣式和JS腳本。
<!--引用網路地圖API-->
<style type="text/css">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map..com/api?key=&v=1.1&services=true"></script>
2.在<body></body>間需要顯示地圖的位置放入以下代碼：（該代碼調用地圖）
<!--網路地圖容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
3.以下代碼放在頁面最底端（其實可放在頁面任意位置。）
<script type="text/javascript">
//創建和初始化地圖函數：
function initMap(){
createMap();//創建地圖
setMapEvent();//設置地圖事件
addMapControl();//向地圖添加控制項
addMarker();//向地圖中添加marker
}
//創建地圖函數：
function createMap(){
var map = new BMap.Map("dituContent");//在網路地圖容器中創建一個地圖
var point = new BMap.Point(115.949652,28.693851);//定義一個中心點坐標
map.centerAndZoom(point,18);//設定地圖的中心點和坐標並將地圖顯示在地圖容器中
window.map = map;//將map變數存儲在全局
}
//地圖事件設置函數：
function setMapEvent(){
map.enableDragging();//啟用地圖拖拽事件，默認啟用(可不寫)
map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小
map.enableDoubleClickZoom();//啟用滑鼠雙擊放大，默認啟用(可不寫)
map.enableKeyboard();//啟用鍵盤上下左右鍵移動地圖
}
//地圖控制項添加函數：
function addMapControl(){
//向地圖中添加縮放控制項
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地圖中添加縮略圖控制項
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地圖中添加比例尺控制項
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}
//標注點數組
var markerArr = [{title:"百恆網路",content:"電話：0791-88117053<br/>手機：15079002975",point:"115.950312|28.693447",isOpen:1,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
];
//創建marker
function addMarker(){
for(var i=0;i<markerArr.length;i++){
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0,p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});
(function(){
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.addEventListener("click",function(){
this.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
_marker.getLabel().show();
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
if(!!json.isOpen){
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
//創建InfoWindow
function createInfoWindow(i){
var json = markerArr[i];
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
return iw;
}
//創建一個Icon
function createIcon(json){
var icon = new BMap.Icon("http://map..com/image/us_cursor.gif", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
return icon;
}
initMap();//創建和初始化地圖
</script>
當然，如果你想偷懶，將以上對應代碼全放在<body></body>間也是沒問題的，呵呵。