1. 程式人生 > >分享個谷歌地圖API實現多標籤(多marker),帶分頁

分享個谷歌地圖API實現多標籤(多marker),帶分頁

我自己做的還是帶分頁,

程式碼很多,不全貼了,有問題可以問我。

<script type="text/javascript" src="http://www.eju.com/js/global/jquery-1.6.1.min.js"></script>
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
 
    <script type="text/javascript">    
      var map;
      var map1;
      var lat = <%= modShop_Info.MapX%>;
      var lng = <%= modShop_Info.MapY%>;
      var latlngs = new Array();
      var shopsname = new Array();
      var latx = new Array();
      var lngy = new Array();
      var myLatLng = new google.maps.LatLng(<%= modShop_Info.MapX%>,<%= modShop_Info.MapY%>);
      var shopsMarkerArray = new Array();
      var myLatLngArray = "<%=this.latlngs%>";          
      var shopsnameArray = "<%=this.shopsname%>";
      latslngs = myLatLngArray.split('*');
      shopsname = shopsnameArray.split('*');         
      var markersArray = [];
      var windowArray = [];
             
      function showshops(){
        var shopsDiv = document.getElementById('mapcanvas1');
        map1 = new google.maps.Map(shopsDiv,{
        center: new google.maps.LatLng(lat,lng),
        zoom:13,
        mapTypeId:google.maps.MapTypeId.ROADMAP
        });
        setMarkers(map1,latslngs,shopsname);
        }
        function setMarkers(map1,latslngs,shopsname){
             for(var i = 0;i<=<%=this.lengh%>;i++){
             var shopsnames = shopsname[i];
             var shoplatlngs = latslngs[i];
             latx = latslngs[i].split(',')[0];
             lngy = latslngs[i].split(',')[1];             
             var mylatlngs = new google.maps.LatLng(latx,lngy);
             var marker = new google.maps.Marker({
             position:mylatlngs,
             map:map1,
             title:shopsnames
             });
            }
           }    
 
       
            //刪除疊加層
      function deleteOverlays() {
          if (markersArray) {
            for (i in markersArray) {
              markersArray[i].setMap(null);
            }
            markersArray.length = 0;
          }
      }
  
      //關閉資訊提示視窗
      function closeWindows() {
          if (windowArray) {
            for (i in windowArray) {
                windowArray[i].close();
            }
          }
         }
       
      function show(results){
          parent.deleteOverlays();
          windowArray.length = 0;
          for (var i = 0; results && i < results.length; i++) {
              showOne(results[i]);
          }
      }
      function showOne(){
          var infowindow = new google.maps.InfoWindow({
              content: result.html
            });
            var marker = new google.maps.Marker({
                position: mylatlng,
                map: map
            });
            markersArray.push(marker);
            windowArray.push(infowindow);
            google.maps.event.addListener(marker, 'click', function() {
              closeWindows();
              infowindow.open(map,marker);
            });
      }
      google.maps.event.addDomListener(window, 'load', showshops);
</script>

相關推薦

分享地圖API實現標籤marker

我自己做的還是帶分頁, 程式碼很多,不全貼了,有問題可以問我。 <script type="text/javascript" src="http://www.eju.com/js/global/jquery-1.6.1.min.js"></script&g

利用object_detection API實現物體識別知識總結

這兩天想著實現一個實時物體識別的程式,正好了解到谷歌的object_detection API可以實時呼叫攝像頭進行識別畫面內的物體,所以就收集了相關資料學習了一下。 要準備的東西: 安裝谷歌object_detection API 安裝python3.5(本人的Mac

地圖 API 開發之獲取坐標以及街道詳情

gpo 窗口 top ces site 1.0 char 回調 .sh 自己的項目中有獲取當前點擊的坐標經緯度或者獲取當前街道的信息的需求。估計這個對於新手來說,還是比較麻煩的,因為從官網上找這個也並不是很好找,要找好久的,運氣好的可能會一下子找到。 獻上自己寫的測試案例。

地圖API教程及在VUE中的使用

目錄 一、獲取金鑰API Key   1、建立專案   2、啟用Maps JavaScript API服務   3、建立API Key   4、設定結算賬戶 二、標頭檔案中引入api資原始檔   1、獲取Ip所屬區域   2、根據地區載入不

地圖API 學習

google.maps.Marker 1.建立方法 var marker = new google.maps.Marker({   position:pointGGPos,//谷歌地圖經緯

微信小程式----map元件實現高德地圖API實現wx.chooseLocationOBJECT

宣告 bug: 頁面搜尋返回的列表在真機測試是會出現不顯示問題? 造成原因:在小程式map元件的同一區域,map元件的檢視層比普通的文字檢視層要高,所以在真機會遮擋! 解決辦法:將該文字檢視採用c

微信小程式連線圖靈API實現智慧聊天超級簡單

小程式的demo.wxml <view class='top'>{{tittle}}</view> <view class='que' > <block wx:for="{{syas}}" wx:for-item="it

python 通過騰訊地圖API獲取全國關鍵詞樓盤/商場位置資訊

到騰訊地圖API官網https://lbs.qq.com/index.html 申請一張賬號,申請開發者金鑰(Key):申請金鑰。   以下為搜尋全國萬達的地理位置資訊 #!coding=utf-8 import requests import re import rand

Python-greenlet完成代替yield使用gevent完成協程

 gevent 實現多工: import gevent # 遇到延時就切換任務 def f1(n): for i in range(n): print(gevent.getcurrent(), i) gevent.sleep(0.5) # 必須用

opencv實現摳圖單一背景替換背景圖

下面簡單圖片演示一下: 提取mask: ===> 替換背景:  + = python的opencv程式碼如下: # coding=utf-8 import cv2 import numpy

Angularjs bootstrap table全選支援單擊行選中

最終實現效果: index.html <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/ang

單播組播廣播詳細講解呀

包含 bubuko mda 服務 個數 轉發 只有一個 multi 什麽是 “單播”(Unicast)、“多播”(Multicast)和“廣播”(Broadcast)這三個術語都是用來描述網絡節點之間通

Google Map Api 地圖接口整理

服務器 依次 wheel gets 並且 ast utf 整理 實例化 一:基本知識: 1. 使用谷歌地圖 API 的第一步就是要註冊一個 API 密鑰,需要註重一下兩點: 1.假如使用 API 的頁面還沒有發布,只是在本地調試,可以不用密鑰,隨便用個字符串代替就

如何新增infowindow距離和時間像地圖的折線連線兩點?

我工作在離子離子谷歌地圖應用程式和使用谷歌提供的本機和方向服務我甲型肝炎多個途徑,使用以下程式碼: calculateAndDisplayRoute() {var points = [];this.directionsService.route({origin: this.start,destination

如何添加infowindow距離和時間像地圖的折線連接兩點?

添加 step sse status true provide led 使用 程序 我工作在離子離子谷歌地圖應用程序和使用谷歌提供的本機和方向服務我甲型肝炎多個途徑,使用以下代碼: calculateAndDisplayRoute() {var points = [];th

地圖實現車輛位置實時跟蹤

谷歌地圖沒有直接給路書的功能,在這裡模擬一個,車輛上會隨時傳一個座標值,通過後端的橋接,即時反饋給前端這些資料,得到座標點,就可以進行地圖打點,實現一種類似導航的效果,來展示位置所在。 本 Chat 內容有: 實時位置展示; 路線回放功能; 路線記錄功能。 通過本次 Chat

地圖國內使用Google Maps JavaScript API國外業務

mark you net ref utf-8 http itl initial map 目前還是得墻 <!DOCTYPE html> <html> <head> <meta name="viewport" c

Net Core 實現翻譯ApI 免費版

display rst 助手 dto 獲取 ice image htm bsp 原文:Net Core 實現谷歌翻譯ApI 免費版  由於谷歌翻譯官方API是付費版本,本著免費和開源的精神。分享一下用 Net Core 實現谷歌翻譯API的代碼。 項目引用的Nuge

地圖路徑回放動畫的實現總結

//宣告兩個計數變數,分別為路徑的標記的計數var tripCount = 1, markerCount = 1;//宣告兩個變數用來儲存時間迴圈var begin,beginmarker;//預設顯示一個藍色路徑flightPath1 = new google.maps.Polyline({//建立線性疊加

使用高德api的tileoverlay層顯示地圖

private void init() { if (aMap == null) { aMap = mapView.getMap(); setUpMap(); TileOverla