Google Maps JavaScript API V3 根據地址載入地圖

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

如下：

javascript代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript">var geocoder;var map;var query = "香港 灣仔 維多利亞公園";var display = "<b>單位：</b> 維多利亞公園";function initialize() {geocoder = new google.maps.Geocoder();var myOptions = {zoom: 17,mapTypeId: google.maps.MapTypeId.ROADMAP}map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);codeAddress();}function codeAddress() {var address = query;geocoder.geocode({'address': address}, function(results, status) {if (status == google.maps.GeocoderStatus.OK) {map.setCenter(results[0].geometry.location);var marker = new google.maps.Marker({map: map,position: results[0].geometry.location});var infowindow = new google.maps.InfoWindow({content: "<b>地址：</b>" + address + "<br>" + display});infowindow.open(map, marker);} else {alert("未能解析該地址的原因: " + status);}});}</script></head><body onload="initialize()"><div id="map_canvas" style="width:500px; height:400px"></div></body>

新封裝版本：

var map; var geocoder = new google.maps.Geocoder(); /** *-25.363882,131.044922 *初始地圖 */
function initialize(lat1, lng1, zoom, canvas_div) {
    var myLatlng = new google.maps.LatLng(lat1, lng1);
    var myOptions = {
        zoom: zoom,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById(canvas_div), myOptions);
}
//根據座標點 mark 標記在初始地圖時function placeMarker(latLng,html) {
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        cursor: "1",
        flat: true,
        draggable: false,
        clickable: true,
        visible: true
    });
    map.setCenter(latLng);
    var infowindow = new google.maps.InfoWindow({ content: html });
   // infowindow.setPosition(latLng);    infowindow.open(map, marker);
}
//根據地址擷取座標function codeAddress(latitude, longitude,html, address, Fun) {
    if (0 == latitude || 0 == longitude) {
        if (geocoder) {
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    Fun(results[0].geometry.location, html);
                } else {
                    Fun(latLng,html);
                    //.return false;                    //alert("Geocode was not successful for the following reason: " + status);                }
            });
        }
    } else {
        placeMarker(new google.maps.LatLng(latitude, longitude),html);
    }
}

調用：

百度：

請求介面中有四個參數：
其中，from和to對應的值分別是：0真實座標；2google座標；4baidu座標。
from：被轉換的座標體系
to：轉換到這個座標體系
x：經度
y：緯度

//GPS經緯度轉換為百度座標//gps:        http://api.map.baidu.com/ag/coord/convert?from=0&to=4&x=lng&y=lat//google:     http://api.map.baidu.com/ag/coord/convert?from=2&to=4&x=lng&y=lat//例子：       http://api.map.baidu.com/ag/coord/convert?from=0&to=4&x=116.397428&y=39.90923            string s = bind("MTE2LjQxMDA0OTUwNTY2", "MzkuOTE2OTc5NTE5ODcz");                //116.41004950566,39.916979519873        protected string bind(string a,string b)        {           return Base64Decode(a) + "," + Base64Decode(b);        }        public static string Base64Encode(string AStr)        {            return Convert.ToBase64String(Encoding.UTF8.GetBytes(AStr));        }        public static string Base64Decode(string ABase64)        {            return Encoding.UTF8.GetString(Convert.FromBase64String(ABase64));        }

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More